Redux 是一种状态管理库，可以用于构建可预测和易于维护的React应用程序。Redux的核心概念是一个不可变的状态树，应用程序的所有状态都存储在该状态树中。在本文中，我们将研究如何在React中使用Redux，并介绍一些Redux的最佳实践。
Redux如何工作
Redux 的核心是一个不可变的状态树，称为"store"。每次应用程序中发生任何事情时，Redux都会更新此存储。要更改状态，您必须发出一个“action”，并使用“reducer”来更改状态。
一个action是一个描述事件的对象。它应该包含一个“type”属性，以便Redux可以了解要执行什么操作。例如，以下是一个action，其中类型为“LOGIN”：
{
type: 'LOGIN',
payload: {
username: 'user1',
password: 'secret'
}
}reducer是一个纯函数，它将当前状态和操作作为参数，并返回新的状态。每次发出一个action时，Redux都会调用所有已注册的reducer函数，并根据其返回值更新状态树。
Redux的最佳实践
将状态存储在最小的组件中
在Redux中，状态始终存储在单个位置，称为store中。您的React组件不应存储状态，而是从store中检索状态，并使用它们来渲染内容。
清晰地定义action类型
在Redux应用程序中定义一个清晰有序的操作类型非常重要。将每个操作的类型放入一个单独的文件中，并确保使用常量。这样，如果您的应用程序需要更改操作，您只需要更改一个地方，而不是每个使用该操作的地方。
将action与reducer分离
在Redux中，操作是通过操作和reducer进行处理的。将它们分开来避免耦合，使代码更容易维护。所有的操作都应该根据type属性进行匹配，并返回新的状态。
使用Redux DevTools进行调试
Redux DevTools是一个Chrome插件，它使您可以轻松地查看Redux存储的内容。使用Redux DevTools可以轻松跟踪应用程序的状态，并找到错误或潜在的性能瓶颈。
在React中使用Redux的步骤
步骤1：安装Redux
要在React中使用Redux，首先需要安装Redux：
npm install --save redux react-redux
步骤2：创建Redux store
现在，您可以创建一个Redux store并定义状态树了。以下是一个简单的示例：
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - -
--------- -----
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- --------
------ - --------- ---- --
---- ---------
------ - --------- ----- --
--------
------ ------
-
-
------ ----- ----- - ---------------------步骤3：将store提供给React组件树
要让React组件访问store，必须将store提供给组件树。这可以通过react-redux库中的Provider组件完成：
-- -------------------- ---- -------
------ - -------- - ---- --------------
------ - ----- - ---- ----------
----------------
--------- --------------
---- --
------------
-------------------------------
--步骤4：使用connect高阶组件连接组件到store
现在，您的React组件将通过已定义的store访问状态。但是，组件并不知道如何检索状态或如何使用操作更新状态。这可以通过connect高阶组件完成。
使用connect时，将组件导出包装在connect函数中，并使用mapStateToProps和mapDispatchToProps函数来处理状态和操作的映射：
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ - ----- - ---- ------------
-------- ------------- --------- ------- -- -
------ -
------- --------------------------- - -------- - -----------------
--
-
----- --------------- - ----- -- --
--------- --------------
---
----- ------------------ - - -------- ----- --
------ ------- ------------------------ ---------------------------------结论
在React中使用Redux时，遵循最佳实践是非常重要的。将状态存储在最小的组件中，清晰定义action类型，将action与reducer分离，并使用Redux DevTools进行调试可使您的应用程序更可靠易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6703c9fed91dce0dc84ca252