25. 为什么要对actionType进行拆分？ - yiqunkeke/react-jianshu-shangguigu-zty GitHub Wiki

观察下未拆分的代码：

在组件中：

---- 可以发现，我们的组件中有多个action。每个action都有一个type属性。

import store from './store' 

handleInputChange = (e) => {
    const action = {
       type: 'change_input_value',
       value: e.target.value
    }
    store.dispatch(action)
}

handleBtnClick = () => {
   const action = {
       type: 'add_todo_item'
    }
   store.dispatch(action)
}

handleDeleteItem = (index) => {
    const action = {
        type: 'delete_todo_item',
        index: index
    }
}

在 reducer 中：

--- reducer中的action.type需要与组件中的写的action中的type属性一致对应。

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

export default (state, action) => {
   if(action.type === 'change_input_value') {
      // ...
   }

   if(action.type === 'add_todo_item') {
      // ...
   }

   if(action.type === 'delete_todo_item') {
      // ...
   }
   return state
}

这就会存在一个问题：

当我们不小心在reducer中把action中的type值 拼写出错时，会导致功能不起作用。但是同时 控制台压根不会提示任何错误。