Redux

Redux实例

来看一个最基本的Redux实现，首先看关于action对象的定义，和Flux 一样 Redux 应用习惯上把 action 类型和
action 构造函数分成两个文件定义，其中定义 action 类型的 src/ActionTyp.js和 Flux版
本没有任何差别，但是 src/Actions.js 文件就不大一样了，代码如下：

import * as ActionTypes from './ActionTypes.js';

export const increment = (counterCaption) => {
  return {
    type: ActionTypes.INCREMENT,
    counterCaption: counterCaption
  };
};

export const decrement = (counterCaption) => {
  return {
    type: ActionTypes.DECREMENT,
    counterCaption: counterCaption
  };
};

Redux 中每个 action 构造函数都返回一个
action 对象，而 Flux 版本中 action 构造函数并不返回什么，而是把构造的动作函数立
刻通过调用 Dispatcher 的dispatch 函数派发出去。

我们创造一个 src/Store.js 文件，这个文件输出全局唯一的那个 Store ，代码如下：

import {createStore} from 'redux';
import reducer from './Reducer.js';

const initValues = {
  'First': 0,
  'Second': 10,
  'Third': 20
};

const store = createStore(reducer, initValues);

export default store;

在这里，我们接触到了 Redux 库提供的 create Store 函数，这个函数第一个参数代表更
新状态的 reducer ，第二个参数是状态的初始值，第三个参数可选。

接下来看 src/Reducer.js 中定义的 reducer 函数，代码如下：

import * as ActionTypes from './ActionTypes.js';

export default (state, action) => {
  const {counterCaption} = action;

  switch (action.type) {
    case ActionTypes.INCREMENT:
      return {...state, [counterCaption]: state[counterCaption] + 1};
    case ActionTypes.DECREMENT:
      return {...state, [counterCaption]: state[counterCaption] - 1};
    default:
      return state
  }
}

代码中使用了三个句点组成的扩展操作符（spread operator），这表示把 state 中所有宇
段扩展开，而后面对 counterCaption 值对应的字段会赋上新值像下面这样的代码这样：

1	return {...state, [counterCaption]: state[counterCaption] + 1};

上面的代码逻辑上等同于下面的代码：

const newState = Object.assign({},state);

newState[counterCaption] ++;

return newState;

Redux实例

React-Redux