redux 是 js 应用的可预测状态的容器。可以理解为全局数据状态管理工具，用来做组件通信。

一、安装redux：

npm install redux --save
# 或
yarn add redux

二、readux文件目录结构的构建（在项目src文件目录下 —> 创建store文件夹）
1、创建store/index.js文件
store就是整个项目保存数据的地方，并且只能有一个。创建store就是把所有reducer给它。

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

const store = createStore(reducer);

export default store;

2、创建store/reducer.js文件(仓库)：
reducer就是根据action来对state进行操作，redux中的state是不能直接修改的，只能通过action来修改，相当于我们在单例中定义setter方法。

import {
  ADD_NUMBER,
  SUB_NUMBER
} from './constants.js';

const initialState = {
  counter: 0
}

function reducer(state = initialState, action) {
  switch(action.type) {
    case ADD_NUMBER:
      return {...state, counter: state.counter + action.num};
    case SUB_NUMBER:
      return {...state, counter: state.counter - action.num};
    default:
      return state;
  } 
}

export default reducer;

通过reducer操作后返回一个新的state，比如这里根据action的type分别对state.num进行加减。

3、创建store/constants.js文件（常量）：

const ADD_NUMBER = "ADD_NUMBER";
const SUB_NUMBER = "SUB_NUMER";

export {
  ADD_NUMBER,
  SUB_NUMBER
}

4、创建store/actionCreators.js文件（事件）：
redux 将每一个更改动作描述为一个action，要更改state中的内容，你需要发送action。一个action是一个简单的对象，用来描述state发生了什么变更。

import {
  ADD_NUMBER,
  SUB_NUMBER
} from './constants.js'

const addAction = (count) => ({
  type: ADD_NUMBER,
  num: count
});

const subAction = (count) => ({
  type: SUB_NUMBER,
  num: count
})

export {
  addAction,
  subAction
}

三、使用redux

import React, { Component } from 'react';
import store from 'store'
import {
  addAction,
} from 'store/actionCreators.js';

class ReduxCpn extends Component {

  constructor(props){
    super(props)
    const storeState = store.getState()
    this.state = {
      count: storeState.counter,
      name: ''
    }
    store.subscribe(() => {
      this.setState({
        count: store.getState().counter
      })
    })
  }

  render() {
    return (
      <div>
        <button onClick={this.testRedux.bind(this)}>测试Redux</button>
        <h2>{this.state.count}</h2>
      </div>
    );
  }

  testRedux(){
    const action = addAction(2)
    store.dispatch(action)
  }
}

export default ReduxCpn;

补充（reducer文件拆分，降低reduer文件的复杂度）

随着项目的扩大，会出现很多页面，同时会产生很多页面的数据需要维护，如果所有的数据都放在store/reducer文件中进行管理，会比较乱，这时候就可以根据不同的页面拆分成不同的reducer文件。
如下：
当前这个reducer既有处理counter的代码，又有处理home页面的数据；

function reducer(state = initialState, action) {
  switch (action.type) {
    case ADD_NUMBER:
      return { ...state, counter: state.counter + action.num };
    case SUB_NUMBER:
      return { ...state, counter: state.counter - action.num };
    case CHANGE_BANNER:
      return { ...state, banners: action.banners };
    case CHANGE_RECOMMEND:
      return { ...state, recommends: action.recommends };
    default:
      return state;
  }
}

根据上面的情况，可以将reducer进行拆分：
1、counter的reduce管理

const initialCounter = {
  counter: 0
}

function counterReducer(state = initialCounter, action) {
  switch (action.type) {
    case ADD_NUMBER:
      return { ...state, counter: state.counter + action.num };
    case SUB_NUMBER:
      return { ...state, counter: state.counter - action.num };
    default:
      return state;
  }
}

2、home 的reducer管理

const initialHome = {
  banners: [],
  recommends: []
}

function homeReducer(state = initialHome, action) {
  switch (action.type) {
    case CHANGE_BANNER:
      return { ...state, banners: action.banners };
    case CHANGE_RECOMMEND:
      return { ...state, recommends: action.recommends };
    default:
      return state;
  }
}

3、在store/reducer.js文件中，通过combineReducers函数对counterReducer 和homeReducer进行合并

import { combineReducers } from 'redux';

import { reducer as counterReducer } from './counter';
import { reducer as homeReducer } from './home';

const reducer = combineReducers({
  counterInfo: counterReducer,
  homeInfo: homeReducer
})

export default reducer;

所以，根据上面的拆分，最后store文件夹下的文件结构如下：

./store
├── counter
│   ├── actioncreators.js   // 存放home相关的action；
│   ├── constants.js        // 存放home相关的常量；
│   ├── index.js            // 统一对外暴露的内容；
│   └── reducer.js          // 存放分离的reducer代码；；
├── home
│   ├── actioncreators.js
│   ├── constants.js
│   ├── index.js
│   └── reducer.js
├── index.js
├── reducer.js             // 合并不同组件的reducer文件

通过拆分后，store管理的不同组件的数据区分的就更加明确了

Redux的基本使用

Redux的基本使用

补充（reducer文件拆分，降低reduer文件的复杂度）