在前面的学习中，我们已经初步了解了 React 的基础知识并实现了一个简单的 todo list 应用。然而，这个应用只是单纯地使用了 React 自身的状态来维护数据，并没有考虑到更加复杂的状态管理问题。在实际开发中，我们常常需要对复杂的数据进行管理，这时候 redux 便可以派上用场。
Redux 介绍
redux 是一个用于 JavaScript 应用的可预测状态容器，它可以让我们更加方便地管理应用中的状态数据，可以让状态修改更加可控和可预测。
redux 的工作流程很简单：应用中所有的 state 都被保存在一个单一对象中，我们需要通过定义 action 和 reducer 来描述 state 的修改。当应用中出现了修改 state 的操作时，我们必须创建一个 action，然后通过 reducer 函数来描述这个 action 对 state 的影响，最终返回一个新的 state。在实际应用中，redux 还涉及到 store、middleware 等概念。
改造前面例子
在前面的例子中，我们已经实现了 todo list 的基本功能，但是如果状态数据更加复杂一些，可能就需要使用到 redux 了，下面我们来看一下如何使用 redux 改造我们的 todo list 应用。
安装依赖
首先我们需要安装 redux 依赖：
npm install redux --save
编写 reducer
在前面我们已经提到了，redux 需要通过定义 reducer 来描述 state 的修改，因此我们需要编写一个 reducer 函数来更新 todo list 的状态。
-- -------------------- ---- -------
----- ------------ - -
------ --
-
------ ------- -------- ------------- - ------------- ------- -
------ ------------- -
---- -----------
------ ----------------- ------ -
------ -
---------------
-
----- ------------
---------- -----
-
-
--
---- --------------
------ ----------------- ------ -
------ ---------------------- ------ -- -
-- ------ --- ------------- -
------ ----------------- ----- -
---------- ---------------
--
-
------ ----
--
--
--------
------ -----
-
-编写 action
我们接下来需要定义一些 action 来触发 reducer 函数，这里我们定义 ADD_TODO 和 TOGGLE_TODO 两个 action：
-- -------------------- ---- ------- --- ---------- - - ------ ----- ------- - ------ -- -- ----- ----------- --- ------------- ---- -- ------ ----- ---------- - ------- -- -- ----- -------------- ----- --
创建 store
store 是 redux 中管理 state 的对象，我们需要在应用中创建一个 store。在这个例子中，我们将 state 和 reducer 传递给 createStore 函数：
import { createStore } from 'redux'
import todoApp from './reducers/reducers'
const store = createStore(todoApp)实现 todo list 组件
最后，我们需要对前面的 todo list 组件进行一些修改，让它与 redux 进行配合使用：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- - ---- -------------
------ - -------- ---------- - ---- --------------------
--- ------- - -- -------- -- -- -
--- -----
------ -
-----
-----
----------- -- -
------------------
-- --------------------- -
------
-
------------------------------
----------- - --
--
-
------ --------- -- ------ - ------ --
------- ----------------- -------------
-------
------
-
-
------- - ------------------
----- ---- - -- -------- ---------- ---- -- -- -
---
-----------------
--------
--------------- --------- - -------------- - ------
--
-
------
-----
-
----- -------- - -- ------ ----------- -- -- -
----
----------------- ------ -- -
----- ----------- --------- ----------- -- ------------------- --
---
-----
-
----- --------------- - ----- -- --
------ -----------
--
----- ------------------ - -------- -- --
------------ -- -- -
------------------------
-
--
----- --------------- - --------
----------------
------------------
-----------
----- ------- - -- -- -
-----
-------- --
---------------- --
------
-
------ ------- -------我们使用 connect 函数将 TodoList 组件和 addTodo、toggleTodo action 等连接起来，这样我们就可以在组件中直接使用 dispatch 函数来触发 action。
总结
在本篇文章中，我们了解了 redux 的基本使用方法，以及如何将其应用到 todo list 应用中。redux 可以让我们更加方便地管理应用中复杂的状态数据，并且也是众多 React 应用中必不可少的一部分。如果你还没有尝试过使用 redux，那么可以考虑在实际开发中使用，它会给你带来很大的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c9cf325ad90b6d041832fd