26. 如何对actionType进行拆分？ - yiqunkeke/react-jianshu-shangguigu-zty GitHub Wiki

1.在store目录下，创建actionTypes.js

----- 在这个文件中统一管理action的type属性

// store/actionTypes.js
export const CHANGE_INPUT_VALUE = 'change_input_value'
export const ADD_TODO_ITEM = 'add_todo_item'
export const DELETE_TODO_ITEM = 'delete_todo_item'

2.在组件中使用actionTypes中的常量：

import store from './store' 
import {CHANGE_INPUT_VALUE, ADD_TODO_ITEM, DELETE_TODO_ITEM } from './store/actionTypes'  // 引入actionTypes中的常量

handleInputChange = (e) => {
    const action = {
       type: CHANGE_INPUT_VALUE,  // 使用actionTypes中的常量替换掉之前的字符串
       value: e.target.value
    }
    store.dispatch(action)
}

handleBtnClick = () => {
   const action = {
       type: ADD_TODO_ITEM  // 使用actionTypes中的常量替换掉之前的字符串
    }
   store.dispatch(action)
}

handleDeleteItem = (index) => {
    const action = {
        type: DELETE_TODO_ITEM,  // 使用actionTypes中的常量替换掉之前的字符串
        index: index
    }
}

3.在 reducer 中使用 actionTypes中的常量

import {CHANGE_INPUT_VALUE, ADD_TODO_ITEM, DELETE_TODO_ITEM } from './actionTypes'  // 引入actionTypes中的常量

const defaultState = {
   inputValue: '',
   list: []
}

export default (state, action) => {
   if(action.type === CHANGE_INPUT_VALUE) {  // 使用actionTypes中的常量替换掉之前的字符串 
      // ...
   }

   if(action.type === ADD_TODO_ITEM) { // 使用actionTypes中的常量替换掉之前的字符串
      // ...
   }

   if(action.type === DELETE_TODO_ITEM ) { // 使用actionTypes中的常量替换掉之前的字符串
      // ...
   }
   return state
}

拆分actionTypes的意义是什么？

之前我们说，假设不拆分actionTypes时，如果不小心将action的type值拼写错误，找错是很困难的。

但是如果我们将action的type中的字符串，都抽离出去，定义成常量。那么在组件或者reducer中，如果再出现action中的type属性值拼写错误时，界面上会直接报错。

src\store\reducer.js
  Line 11:24:  'CHANGE_INPvT_VALUE' is not defined

这就是为什么我们要把字符串提取出来定义成变量或者常量的原因。

如果常量或者变量书写错误时，会迅速的报出异常，可以迅速的定位到问题。但是如果是一个字符串拼写错误，它是不会报出异常的。