redux初步理解

redux是一个第三者状态管理架构
成员：

• 仓库（store）
• 收货员（reducer）
• 库管（getState,subscribe）

成员间关系图

image.png

使用目录：

image.png

使用步骤：
1、npm install -S redux
2、项目中创建store文件夹
3、store中创建index.js引入redux的createStore方法，结合reducer创建仓库
4、store中创建reducer.js 返回一个纯函数
5、store中创建actionTypes.js用来统一管理action类型
6、store中创建actionCreator.js用来统一创建action对象
7、对应组件中引入store 利用store.getState()获取仓库对应数据，利用store.dispatch(action)提交对仓库数据的修改，利用store.subscribe(fn)检测仓库数据更新。
文件内容：
store/index.js

import { createStore } from 'redux';
import reducer from './reducer';
const store = createStore(reducer,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
export default store;

store/reducer.js

export default (state = defaultState,action)=>{
  //根据action返回新的state（注意的能直接修改state）
}

store/actionTypes.js

export const CHANGE_INPUT_VALUE  = "change_input_value";

store/actionCreator.js

import {
    CHANGE_INPUT_VALUE
} from "./actionTypes";

export const valueChangeAction = (value)=>{
    return {
        type:CHANGE_INPUT_VALUE,
        value
    }
}

组件中应用redux相关代码

 constructor(props){
    super(props);
    //初始化组件state为store
    this.state = store.getState();
    //监控redux仓库数据变更
    store.subscribe(this.storeChange);
  }
//发送某个类型的action，申请改变仓库数据
store.dispatch(valueChangeAction(e.target.value));