在 Redux 中，action 是一个包含 type 和 payload 属性的普通 JavaScript 对象，用于描述一个应用中发生的事件。type 字段用于描述事件类型，而 payload 字段则用于携带数据。

而 reducer 是一个纯函数，接收当前状态和一个 action 作为输入，并返回一个新的状态。它不会修改原有的状态，而是会基于输入的参数生成一个新的状态。reducer 通常会使用 switch 语句来根据不同的 action 类型进行不同的处理

这里首先需要安装一个chrome的redux调试插件。

如果安装了Redux_dev_tools就会调用对应的函数：

开启之后就可以看到Store里面的数据

1.通过Action来和Store通信

当input框的内容改变的时候我们需要改变Store里面的数据，这时候就需要创建Action了：

handleInputChange(e) { 
    console.log(e.target.value); //创建Action来描述你的期望 
    const action = { type: 'change_input_value', value:e.target.value } 
}

接着需要把这个action传递给store，就需要利用到store的一个dispatch方法了：

handleInputChange(e) { 
    console.log(e.target.value); //创建Action来描述你的期望 
    const action = { type: 'change_input_value', value:e.target.value }; 
    store.dispatch(action); 
}

这样鞋之后不会报错了。这时候已经把action传递给store，store并不知道该怎么处理，需要咨询小册子Reducers，此时需要Store把当前的数据和接收到的action一起传递给小册子Reducers来进行处理。

2. 通过Reducers更新整体状态数据

目前Store是当接收到Action的时候会自动把当前状态和Action传递给Reducers，不需要我们处理：

Reducer这个函数state就是上一次的状态，action就是用户的请求了！

3. 组件订阅Store来更新状态

但是此时组件的内容并没有更新，这需要我们在组件里面进行处理，在构造函数中这样去写---订阅Store：

handleStoreChange(e) { this.setState(store.getState()); }

当我感知到Store数据变化的时候，用store数据来更新组件的状态数据！

4. 更新列表流程

跟上面一样的，这里原理跟上面一样，再过一遍流程熟悉一下。

首先给Button绑定事件来提交数据变更Action：

接着在Reducers根据ActionType来判断并处理数据：

最后还需要对应进行组件的Store订阅，但是这个做过了，不需要再实现了！

5. 完成TodoList删除功能

我们依然走Redux的流程，我们对相应组件进行事件绑定。

对应组件应该是List.Item，绑定一个删除事件：

直接多传递一个index参数，然后实现这个函数：

handleItemDelete(index) {
    const action = { type: 'delete_todo_item', index } 
    store.dispatch(action); 
}

然后更新Reducer：

if (action.type === 'delete_todo_item') { 

const newState = JSON.parse(JSON.stringify(state)); 

newState.list.splice(action.index,1); return newState; 
    }

就可以了！