React-Redux 是一个第三方模块，可以帮助我们在 React 中更加方便地使用 Redux。需要注意的是，React 和 Redux 是两个不同的框架。

1. 清除原先的 Redux 相关文件

首先，我们需要删除之前所有的 Redux 相关文件，包括之前的 TodoList。最终，只剩下如下文件：

接着，我们使用 npm 或者 yarn 安装 React-Redux：

2. 初始化环境 - 熟悉之前的步骤

按照之前的思路，我们首先创建一个 TodoList 组件：

接着，我们创建 store，并配置 store 和初始的 reducer：

这样，基本的 reducer 和 store 就完成了。之前，我们获取 store 的数据是通过下面的方法实现的：

3. 使用 React-Redux

现在，我们需要在 index.js 中修改代码，使用 React-Redux 提供的 Provider 对原组件进行包装：

首先，像上面一样，我们使用新的 Provider 对原来的 TodoList 进行包裹。接着，我们将 store 连接进去，此时 Provider 提供器内的所有组件都可以使用这个 store：

这里的 Provider 是一个重要的 API。

3.1 获取 store 的数据 - connect

现在，获取 store 的数据就容易多了。我们需要借助 connect 这个 API，并且修改导出的方法。connect 可以帮助组件和 store 进行连接：

通过上面的修改，TodoList 和 store 就完成了连接。下面看看两个参数中的第一个，它需要传递一个函数，用来定义 TodoList 和 store 之间连接的规则，即将 store 的数据映射到组件的 props 上：

需要注意的是，这里使用了 props。

通过这一步，后面就可以通过 props 获取初始的 value。

3.2 处理输入框改变事件

现在，我们需要修改 store 中的数据。这时候，我们可以使用第二个参数：

这个参数实际上是将 store 的 dispatch 方法挂载到 props 上面。之前的逻辑是获取需要修改的值，然后调用 store 的 dispatch 方法去改变 store 的内容。实际上，store 的 dispatch 就是映射到某一个 props 上面的。现在，可以通过 props.xxx 方法自动关联 dispatch：

这个方法本身接收了 dispatch 方法，所以里面可以调用 dispatch 方法去改变数据。补全代码：

然后，我们需要去 store 中处理 Action - Reducer：

4. 优雅简化现有代码

在代码中使用解构赋值来避免重复调用this.props.xxxx。

现在，TodoList只包含一个render函数，作为一个UI组件，只负责页面渲染（逻辑交给其他组件处理）。因此，我们可以将其改写为一个无状态组件，它没有生命周期函数，并且底层没有实例，可以有效地提高代码性能。

接下来，我们需要考虑如何导出这个组件。在现有的代码中，我们使用了connect方法来将UI组件与其相关的内容和逻辑相结合，因此，connect方法返回的实际上是一个容器组件。