Redux 词汇，不巧你也不熟

前言

    刚从 Vue+ElementUI 转来 React+BlueUI 着实有些被 React 前端数据流转给秀了；前端请求后端服务，服务响应返回数据，前端拿着数据渲染到 UI，这么简单的流程，到了 React 就被 action、reducer、store、和 state、props 数据传递给带进了胡同里。

词汇

1. Redux

    Redux 是 JavaScript 状态容器，提供可预测化的状态管理。可以让你构建⼀致化的应⽤，运⾏于不同的环境（客户端、服务器、原⽣应⽤）。Redux ⽀持 React、Angular、Ember、jQuery 甚⾄纯 JavaScript。
    Redux 所做的，在 reducer 中处理 action （包括对象复制及不可变更新），action 分发之后通知订阅者，订阅者根据 state 变化更新 UI 组件。

2. State (state tree)

    State 通常是指⼀个唯⼀的 state 值，由 store 管理且由 getState() ⽅法获得。它表示了 Redux 应⽤的全部状态，通常为⼀个多层嵌套的对象。数据类型无限制，支持存放任意数据类型的数据，但建议存放的数据支持序列化，Redux 将 State 数据转换 JSON 性能会更好。

// State 状态树
type State = any

eg: 初始化某模块 state 数据集。

const initialState = {
  data: [],
  appData:[],
  smsMonitorData:[],
  nodeData:{},
  analysisData:[],
  analysisTime:null,
  nodeInstata:[],
  smsBillData:null,
  smsAccountData:null,
  activityInstData:null,
  isSmsUnknownStatusFree:1,
  allNodeInstSendSmsInfo: {
	  sendSmsCount:null,
	  sendPeopleCount:null,
	  beforeSmsbillTime:0
  },
  itemList:[],//商品数据
  listLoading: false,
  //最热加购单品
  marketCart:{
    numIid:null,
    imgSrc:null,
    title:"",
    price:"--",
    uv:"--"
  },
  //最热收藏单品
  marketItem:{
    numIid:null,
    imgSrc:null,
    title:"",
    price:"--",
    uv:"--"
  }
};

3. Store

    store 就是⽤来维持应⽤所有的 state tree 的⼀个对象。改变 store 内 state 的唯⼀途径是对它 dispatch ⼀个 action。
    准确的说整个应⽤的 state 被储存在⼀棵 object tree 中，并且这个 object tree 只存在于唯⼀⼀个 store 中。
    因为应⽤的构建发⽣于 reducer，所以⼀个 redux 应⽤中应当只有⼀个 store。

type Store = {
  dispatch: Dispatch
  getState: () => State
  subscribe: (listener: () => void) => () => void
  replaceReducer: (reducer: Reducer) => void
}

eg: {module}/store/index.js 某模块下store 文件夹下的 index.js

'use strict';

import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';

const createStoreWithMdware = applyMiddleware(
  thunkMiddleware
)(createStore);

export default createStoreWithMdware;

扩展

• Middleware
      Middleware 是⼀个组合 dispatch function 的⾼阶函数，返回⼀个新的 dispatch function，通常将异步 actions 转换成 action.
      默认情况下， createStore() 所创建的 Redux store 没有使⽤ middleware，所以只⽀持 同步数据流。可以使⽤ applyMiddleware() 来增强 createStore() ，对于开发者来说可以⽤简便的⽅式来描述异步的 action。像 redux-thunk 或 redux-promise 这样⽀持异步的 middleware 都包装了 store 的 dispatch() ⽅法。
      middleware 提供的是位于 action 被发起之后，到达 reducer 之前的扩展点。 你可以利⽤ Redux middleware 来进⾏⽇志记录、创建崩溃报告、调⽤异步接⼝或者路由等等

4. Action

    action 是⼀个普通对象，action ⽤来表明要改变 state，而如何改变 state 由 reducer 所负责 。action 是将数据放⼊store 的唯⼀途径。
    action 必须拥有⼀个 type 域，它指明了需要被执⾏的 action type。Type 类型建议为 String 可以被序列化。

// Action 对象
type Action = Object

简单的action形式

{ type: 'ADD_TODO', text: 'Use Redux' }
{ type: 'REMOVE_TODO', id: 42 }
{ type: 'LOAD_ARTICLE', response: { ... } }

eg: {module}/actions/index.js 某模块下 action 定义

export const GET_FAILED = 'GET_FAILED';
export const GET_COUPON_SUCCESS = 'GET_COUPON_SUCCESS';
export const UPDATE_STATE_FAILED = 'UPDATE_STATE_FAILED';
export const GET_LIST_SUCCESS = 'GET_LIST_SUCCESS';
export const GET_LIST_FAILED = 'GET_LIST_FAILED';

export function deleteCouponActivityById(record, page, pageSize) {
  return (dispatch) => {
    ajax({
      api: 'deleteCouponActivityById'，
      data: record
    }, (json) => {
      getModifyMarketingCouponActivityList(dispatch, {
          page: page,
          pageSize: pageSize
      });
    }, (json) => {
      dispatch({
        type: UPDATE_STATE_FAILED,
        data: json
      });
    });
  };
}
export function getCouponList(params) {
	return (dispatch) => {
		ajax({
			api: 'getCoupons',
			data: params
		}, (json) => {
			dispatch({
				type: GET_COUPON_SUCCESS,
				data: json.data
			});
		}, (json) => {
			dispatch({
				type: GET_FAILED,
				data: json
			});
		});
	}
}
function getModifyMarketingCouponActivityList(dispatch, params) {
  ajax({
    api: 'findCouponActivityListByPage',
    data: params
  }, (json) => {
    dispatch({
      type: GET_LIST_SUCCESS,
      data: json.data
    });
  }, (json) => {
    dispatch({
      type: GET_LIST_FAILED,
      data: json
    });
  });
}

5. dispatch (dispatch function)

    dispatch 函数是⼀个接收 action 或者异步 action，该函数可以往 store 分发⼀个或多个 action，也可以不分发任何 action。

// dispatch 函数
type Dispatch = (a: Action | AsyncAction) => any

    dispatch 一个 action 表明要改变 store 的 state

eg：{module}/containsers/{module-child}/index.jsx 某模块 index 页面删除某行记录

  onDelete=(record)=> {
    const { dispatch } = this.props;
    dialog.confirm('确定要删除该活动？',() => {
      dispatch(actions.deleteCouponActivityById(record, 1, 10))
    })
  }

6. Reducer (reducing function)

    Reducer 函数接受两个参数，之前累积运算的结果和当前被累积的值，返回的是⼀个新的累积结果。累计运算的结果是 state 对象，⽽被累积的值是 action，返回一个新的 state 对象。即 reducer 用来更新 state。
    简单来说就是，reducing function 接收当前 state 存放的数据集和 action获取的新数据，把两者归并后返回新的数据集。前后端交互时，后端响应的结果集就是在这里被存放到 store 的 state tree。

// Reducer 函数
type Reducer<S, A> = (state: S, action: A) => S

eg:reducers 文件夹下 index.js

// actions 是管理当前应用下 action 的文件
import * as actions from '../../actions';
const initialState = {
  activityData: []
};
const defaultAction = {
};
export default function index(state = initialState, action = defaultAction) {
  switch (action.type) {
    case actions.GET_LIST_SUCCESS:
      return Object.assign({}, state, {
        listLoading: false,
        activityData: action.data
      });
    case actions.UPDATE_STATE_FAILED:
      return Object.assign({}, state, {
        listLoading: false
      });
    default:
      return state;
  }
}

下一篇：React-Redux 数据流转详解
Power By niaonao, The End