1.安装redux及基础文件的创建

1.终端安装yarn add redux

2在src 目录下新建store文件夹，在store中创建index.js文件

3在index.js中导入 import {createStore} from 'redux;

4 创建数据公共存储仓库 const store = createStore();

5.导出store  export default store

6.创建reducer.js文件

7.定义默认的数据 const defaultState = {inputValue:'123', list:[1,2]}

8.导出一个方法 export default (state = defaultState, action) =>{return state;}

9.在index.js中导入reducer.js。import reducer from './reducer',把store.js中创建store修改为const store = createStore(reducer)

10.在需要使用数据的组件中导入store。import store from './store/index.js'或者import store from './store'

11.通过store.getState()获取数据

2.组件通过redux修改数据

1.创建action对象

const action = {

      type:'input_value_change',

      value:e.target.value

}

2.通过store把action对象传给reducer.js。store.dispatch(action);

3.在reducer.js中导出的(state = defaultState, action) =>{}方法中修改store中的state，在方法中返回新的state完成，在方法中不能修改原来的state，需要复制一份state

const newState = JSON.parse(JSON.stringify(state))

复制修改数据后返回newState.

4.在组件中通过store.subscribe(this.handleStateChange)监听state的改变。然后在this.handleStateChange中重新给state赋值，重新调用render方法

3.调试redux需要安装插件redux devtools

1.在谷歌插件商城下载安装 redux-devtools

2.在store文件夹下的index.js中配置

const store = createStore(reducer,

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

4.创建actionTypes.js文件，统一保存action的type

导出方式

export const KEY = 'value';

导入方式，import { KEY } from './store.actionTypes'

5.统一管理action

创建actionCreators.js文件

导出方法。例如

export const getInputChangeAction = (value) => ({

    type:KEY,

    value

});

该方法传入value,返回action对象，当使用redux-thunk中间件之后可以返回函数

6.给不同模块创建不同的reducer.js文件，通过combineReducers进行整合

在最外面的store中导入combineReducers

import {combineReducers} from 'redux;

假设headerReducer是一个模块的reducers，在导入 headerReducer后，整合方式如下

const reducer = combineReducers({

    header:headerReducer

});

export default reducer;

其中header是headerReducer的名称。

注意：此时在做印社关系时，headerReducer中的数据需要通过state.headerReducer.属性得到

当模块中的state为不可变对象时，合并出的state也改成不可变对象的方法

1.终端导入redux-immutable。 yarn add redux-immutable。

2.在文件中导入

import {combineReducers} from 'redux-immutable'

3.生成不可变对象

const reducer = combineReducers({

    header:headerReducer

});

此时获取属性需要使用state.get('header').get('key')

或者state.getIn(['header', 'focused'])

7.导入immutable,使reducer中传入的state不可变

1.导入：yarn add immutable

2.在reducer中导入fromJS

import {fromJS} from 'immutable;

3.创建immutable对象

const defaultState = fromJS({

    test:false

});

4.immutable对象获取属性值

state.getIn('test')

5.immutable对象设置属性值

state.set('test', true);

immutable的set方法，会结合之前immutable对象的值和新设置的值生成一个新的immutable对象

在用immutable对象时必须使用getIn、set操作属性值，因为普通对象没有这两个方法

immutable对象可以使用merge修改值，参数传一个对象