介绍
Redux 是一个基于 Flux 架构的状态容器，它能够帮助 React 应用程序的状态管理。它的工作原理是通过单向数据流来管理应用程序的状态，这意味着您的代码仅仅是一个函数，其输入是当前状态和一个描述状态如何变化的操作，返回值是新的状态。
Redux 可以使代码更加清晰、简单和易于维护。在这篇文章中，我会给您介绍如何在 React 项目中使用 Redux，并提供示例代码和深度学习。
REDUX 的工作原理
在 Redux 应用程序中，有三个主要的对象：
- Store: 存放应用状态
- Action: 描述改变应用程序状态的操作
- Reducer: 描述如何更新应用程序状态
当应用程序发生变化时，Store 会调用一个特殊的函数，这个被称为 Reducer。Reducer 接收两个参数：当前的状态和新的 Action。它会使用这些参数来计算新的状态并返回它。然后 Store 将新的状态存储在内部，并通知所有的组件进行更新。
如何在 React 中使用 REDUX
在 React 中，您需要执行三个简单的步骤来开始使用 Redux:
- 安装 Redux
npm install redux react-redux --save
- 创建一个 Store
您需要创建一个 Store 来存储应用程序的状态。这个 Store 包含了一个由多个 Reducer 组成的树。
import { createStore } from 'redux'
import rootReducer from './reducer'
const store = createStore(rootReducer)- 连接 React 和 Redux
React 和 Redux 之间的连接需要一个叫做 Provider 的组件。它是在将 Redux 的 Store 注入 React 组件树中的中间件。
-- -------------------- ---- -------
------ ----- ---- -------
------ - -------- - ---- -------------
------ ----- ---- ---------
------ --- ---- -------
----- ---- - -- -- -
--------- --------------
---- --
-----------
-
--------------------- --- --------------------------------示例代码
下面是一个小示例，它演示了如何使用 Redux 来管理并展示列表。
首先，我们需要创建一个用于管理状态的 Reducer，在这个例子中，我们使用 addItem 和 removeItem Action 更新列表。
-- -------------------- ---- -------
------ ------- -------- ------------- - --- ------- -
------ ------------- -
---- -----------
------ ---------- ---------------
---- --------------
------ ------------------- ------ -- ----- --- ---------------
--------
------ -----
-
-然后我们可以使用connect()方法连接 Redux 和 React 组件。
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- - ---- -------------
----- --- ------- --------------- -
------------------ -
------------
---------- - -
------ --
-
----------------- - ----------------------------
---------------- - ---------------------------
----------------- - ----------------------------
-
------------------- -
--------------- ------ ------------------ --
-
------------- -
------------------------------------
--------------- ------ -- --
-
------------------- -
----------------------------
-
-------- -
------ -
-----
------ ----------- ---------------------------- ------------------------ --
------- ------------------------------ -------------
----
---------------------------- ------ --
--- ------------
------
------- ----------- -- -----------------------------------------
-----
--
-----
------
-
-
-
----- --------------- - ----- -- -- ------ ----- --
----- ------------------ - -------- -- --
-------- ---- -- ---------- ----- ----------- -------- ---- ---
----------- ----- -- ---------- ----- -------------- -------- ----- --
--
------ ------- ------------------------ ------------------------在上面的代码中，我们将 mapStateToProps 函数的返回值映射到 App 组件的 props ，然后再将这个 App 组件传递给 connect() 方法。
最后，我们需要更新 index.js 文件，以便将 Redux Store 传递给 Provider 组件。
-- -------------------- ---- -------
------ ----- ---- -------
------ -------- ---- -----------
------ - -------- - ---- -------------
------ - ----------- - ---- -------
------ --- ---- -------
------ ------- ---- -----------
----- ----- - --------------------
----------------
--------- --------------
---- --
------------
-------------------------------
-结论
Redux 是一个非常有用的状态容器，可以帮助您管理 React 应用程序的状态。在这篇文章中，我们介绍了 Redux 的工作原理、如何在 React 中安装和使用 Redux，并演示了一个简单的示例代码。希望这篇文章能够帮助您更好地理解 Redux，并在您的应用程序中使用它来提高代码的可维护性和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670b1bd5d91dce0dc8877477