ReactNative Flux框架使用 基础篇

Flux框架应用—基础

一、基础概念介绍

1.register(function callback):string

注册监听器，用于监听任何的dispatched payload

2.unregister(string id)

取消某个dispatch的监听

3. waitFor(array ids):void

可以使当前执行的dispatch，等到某个指定的dispatch执行完之后再执行

4.dispatch(object payload):void

发送一个dispatch给所有的监听器

5.isDispatching():boolean

判断当前的dispatch是哪个

二、基础功能封装

1.创建AppDispatcher.js文件

作用：封装并暴露各种方法

(1) 引入Flux框架

import { Dispatcher } from 'flux';

(2) 实例化Dispatcher类

const flux = new Dispatcher();

(3) 暴露各种方法

注册监听方法

export function register(callback) {

return flux.register(callback);

}

等待方法

export function waitFor(ids) {

return flux.waitFor(ids);

}

分发方法：分发单个动作

export function dispatch(type, action = {}) {
if (!type) {
throw new Error('You forgot to specify type.');
}
if (process.env.NODE_ENV !== 'production') {
if (action.error) {
console.error(type, action);
} else {
console.log(type, action);
}
}

flux.dispatch({ type, ...action });
}

分发方法：分发promise类型的三个动作

export function dispatchAsync(promise, types, action = {}) {
const { request, success, failure } = types;

dispatch(request, action);
promise.then(
response => dispatch(success, { ...action, response }),
error => dispatch(failure, { ...action, error })
);
}

2、创建ActionTypes.js文件

(1) 引入keymirror框架

import keyMirror from 'keymirror';

框架介绍

通过该框架创建的对象，对象中的value值等于key值，通俗的讲，当你创建{key:value}时，key===value

(2) 代码实现

export default keyMirror({
USER_LOGIN: null,
USER_LOGIN_SUCCESS: null,
USER_LOGIN_ERROR: null,
USER_INFO_UPDATE_NAME: null,
});

3、实际应用

（1） register()方法的实现

import { register } from 'AppDispatcher';
import ActionTypes from 'ActionTypes';

register(action => {
switch(action.type) {
case 'USER_INFO_UPDATE_NAME':
this.setState({
nickName: action.response
});
break;
}
});

使用说明：

register()方法的参数是function类型，demo中使用了箭头方法的方式，接收到的内容都在箭头方法的action参数中，根据action的类型进行相关操作，这里是修改用户昵称

（2） dispatch()方法的实现

import { dispatch } from 'AppDispatcher';
import ActionTypes from 'ActionTypes';

dispatch(ActionTypes.USER_INFO_UPDATE_NAME, {response: this.state.nick});

使用说明:

参数一：action的类型

参数二：具体的action，Object类型