React框架（十四）Redux中的代码优化

题外话——react中Eslint配置 让你的代码更规范
——————————————————————————————————

一、ActionType的拆分

在之前的代码中，我们在使用action的时候，会定义一个字符串类型的type，这个帮助Redux知道组件要做什么事情，而当字符串出现拼写错误的时候，却不会在控制台出现警告，原因在于：程序会对未定义的常量或者变量报错，而不会对字符串报错，这很容易导致时间、精力的浪费。

于是出现了ActionType的拆分方法：

1. 在store文件夹中定义一个新文件actionTypes.js
   
2. 从该文件中导出需要用到的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';

3. 在组件中导入这三个常量，修改所有action中的type
4. 在组件中导入这三个常量，修改Reducer中所有的type

二、使用actionCreator统一创建action

之前的代码里，每生成一次action，就要定义一次action对象，对于后期维护比较棘手，于是采用统一定义action的方法。

1. 在store文件夹下创建actionCreators.js
   
2. 在该文件中定义方法来创建action

import {CHANGE_INPUT_VALUE,ADD_TODO_ITEM,DELETE_TODO_ITEM} from './actionTypes';

//用该函数返回一个对象
export const getInputChangeAction = (value) => ({
   type:CHANGE_INPUT_VALUE,
   value
});

export const getAddItemAction = () => ({
    type:ADD_TODO_ITEM
});

export const getDeleteItemAction = (index) => ({
    type:DELETE_TODO_ITEM,
    index
});

3. 在组件中引入
   import {getInputChangeAction,getAddItemAction,getDeleteItemAction} from './store/actionCreators'
4. 使用方法，如

    handleInputChange(event) {
        //action对象创建
        const action = getInputChangeAction(event.target.value);
        //把action传递给store
        store.dispatch(action);
    }

三、Redux设计和使用三个原则

• store是唯一的，整个项目中只含有一个store
• 只有store能够改变自己的内容，即subscribe中的函数来使自己更新
• Reducer必须是纯函数（纯函数：给定固定的输入，就一定会有固定的return输出，而且不会有任何副作用），不允许出现异步、ajax请求、日期关联的内容，没有任何副作用是指不对传入的参数进行任何修改。