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修改值，参数传一个对象
