Redux

Redux工作流程

redux主要通过store管理react中的数据流，工作流程如下：

• 第一步 创建store文件夹，包含一个index.js文件和一个reducer.js文件

//index.js文件
import { createStore } from 'redux';  //首先需要从redux中引入createStore 
import reducer from './reducer';  //引入reducer文件

//其次是使用createStore创建一个store，在createStore中配置两个参数，第一个参数为引入的reducer，第二个参数是方便在浏览器中使用Redux-DevTools工具查看数据变化
const store = createStore(  
    reducer,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

export default store;  //最后导出以供页面组件调用

//reducer.js文件,实际上是创建一个函数
const defaultState = {  //初始state
    inputValue:'',
    list:[1,2]
}

//实际上是创建一个函数，这个函数包含state和action两个参数
export default  (state = defaultState, action) =>{
    return state
}

• 第二步 使用redux更新页面数据

 //将store引入需要使用的页面，这里引入到TodoList.js
import store from './store'; 

//在constructor构造函数里使用getState（）方法获取store里面的state并且赋值给TodoList页面的state 
this.state = store.getState();

//在操作事件里面定义action，并使用store.dispatch（）方法传给store
handleInputChange(e) {
        const action = {
            type: 'change-input-value',
            value: e.target.value
        }
        store.dispatch(action);
}

//在reducer.js文件中根据action类型更新state 并且返回
if(action.type === 'change-input-value'){
        const newState = JSON.parse(JSON.stringify(state));  //reducer里面不能直接修改state，只能拷贝一个state出来做修改， JSON.parse(JSON.stringify())深拷贝
        newState.inputValue = action.value;
        return newState
}

//要做到页面的实时刷新还要调用 store.subscribe（）方法
store.subscribe(this.getNewStore) //constructor构造函数中调用

getNewStore() {
        this.setState(store.getState())  //获取最新的state
}

• 统一定义action中的type名称

//创建actionTypes.js文件统一定义type名称
export const CHANGE_INPUT_VALUE = 'change_input_value';
export const ADD_TODO_ITEM = 'add_todo_item';
export const DELETE_TODO_ITEM = 'delete_todo_item';

//分别在TodoList.js和reducer.js引入定义好的type名称
//TodoList.js
import { getInputChangeAction, getAddItemAction, getDeleteItemAction } from './store/actionCreators';  
//reducer.js
import { CHANGE_INPUT_VALUE, ADD_TODO_ITEM, DELETE_TODO_ITEM  } from './actionTypes';

//使用定义好的type名称
//TodoList.js
const action = {
     type:CHANGE_INPUT_VALUE
};
//reducer.js
if(action.type === CHANGE_INPUT_VALUE){
     const newState = JSON.parse(JSON.stringify(state));
     newState.inputValue = action.value;
     return newState
}

• 使用actionCreators统一创建action
  即不在组件里面创建action，而是在一个js文件中统一创建action，目的是方便测试和后期维护数据

//创建actionCreators.js文件
 
//第一步，引入actionTypes文件
import { CHANGE_INPUT_VALUE, ADD_TODO_ITEM, DELETE_TODO_ITEM  } from './actionTypes';

//第二步，定义方法
export const getInputChangeAction = (value) => ({
    type:CHANGE_INPUT_VALUE,
    value
})

//第三步，在TodoList.js文件中引入并使用
import { getInputChangeAction } from './store/actionCreators';

 handleInputChange(e) {
    const action = getInputChangeAction(e.target.value);
    store.dispatch(action);
}

总结

• redux设计与使用的三大原则
  (1)store是唯一的；
  (2)只有store能够改变自己的内容（reducer可以接受state，但绝不能改变state）;
  (3)reducer必须是纯函数（纯函数是指给定固定的输入就一定会有固定的输出，而且不会有任何副作用）。
• redux核心API
  (1)createStore:创建store；
  (2)store.dispatch:派发action，将action传递给store；
  (3)store.getState:获取store里面所有数据内容；
  (4)store.subscribe:订阅store内容改变。