React 是一款前端框架，它的出现给开发者带来了全新的体验。但是它不擅长处理双向数据流的复杂情况，这时候 Redux 就可以派上用场了。Redux 提供了一种数据管理的机制，可以让我们更好地处理数据流。在本文中，我们将会介绍一些 Redux 与 React 共同开发的最佳实践以及如何联合起来使用。
Redux 简介
Redux 是 JavaScript 应用程序状态容器，常用于 React 应用中。Redux 支持可预测的状态管理，可以方便地进行调试和测试。Redux 是一个单向数据流框架，这意味着所有的数据操作都是单向的，只有通过 action 触发 state 的更新，最后通过 reducer 进行更新。
Redux 的核心需要明确三个概念：store、action 和 reducer：
- Store 存储应用程序的完整状态树，并支持通过
getState()方法获取当前状态，通过dispatch(action)方法更新状态，通过订阅 store 的更新来获取状态变化。 - Action 是一个更新状态的对象，描述了我们应用中的“发生了什么”，每个 action 都必须有一个
type属性，这是一种标识其类型的字符串常量。 - Reducer 定义了把 action 更新到状态树中的逻辑。一个纯函数接收旧的 state 和 action，返回一个新的 state，在 Redux 中 reducer 应该是纯函数，这意味着同样的输入必须产生同样的输出。
Redux 和 React 如何结合
Redux 与 React 的结合可以分为两个部分：数据流和组件。在数据流方面，Redux 负责管理应用程序的状态树，React 负责渲染页面并处理用户交互事件。在组件方面，Redux 将组件分为了两种：容器组件和表示组件。容器组件是一个有状态组件，它负责从 Redux 中获取数据并传递给表示组件。表示组件是一个无状态组件，它接收数据并渲染页面。
最佳实践
1. Store 的组织方式
如何组织 Redux 的 Store 是一个极其重要的问题。如果不好的组织方式会导致管理 Store 变得非常困难。在 Redux 中，最佳实践是按功能模块组织 State。例如，对于一个社交网站，可以根据后台返回的 API 来设计 state 的层次结构。
-- -------------------- ---- -------
-
----- --- ------- ----
------ -
----- --- ------- ----
----- --- ---- ---
--
--------- -
----- --- ------- ----
----- --- ---- ---
--
------ --- ------ ---
-2. Action Type 的名称
在设计 Redux 的 action type 时，我们应该尽量避免使用字符串。如果我们在代码中任意使用字符串，那么我们有可能在包含拼写错误的字符串时无法找到问题，因此我们可以使用 JavaScript 对象来提供一个中心化的位置来存储城市字符串。
export const USER_LOGIN = 'USER_LOGIN'; // 普通字符串类型
export const USER_LOGOUT = 'USER_LOGOUT';
export const ActionTypes = {
USER_LOGIN: 'user_login', // 使用对象进行存储
USER_LOGOUT: 'user_logout'
};3. Redux 的中间件
Redux 中间件是 Redux 重要特性之一，它允许在 dispatch 时拦截 dispatch 函数，并根据自己的需求添加额外的逻辑，使得 Redux 的工作变得更加灵活。以下是一些最常见的 middleware:
a. Redux-thunk
Redux-thunk 是最流行的 Redux middleware 之一，它允许在 action creator 中使用异步请求。这是因为还没有拿到结果或者还没有返回结果时，我们不希望 reducer 进行状态更新。
-- -------------------- ---- -------
----- --------------- - -- -- -
------ -------- ---------- -
---------- ----- --------------- ---
----------------------
---------------- -- ----------------
------------ -- -
----------
----- ---------------
-------- -----
---
---
--
--b. Redux-saga
Redux-saga 是一个基于 generator 的 Redux middleware。它使用 Generator 函数来写异步代码，避免了异步并发代码带来的回调地狱。在代码方面，Saga 可以分为三个部分：处理器，执行器和守卫程序。
-- -------------------- ---- -------
--------- --------------- -
--- -
----- ----- ----- --------------- ---
----- ---- - ----- -------------------
----- ----- ----- --------------- -------- ---- ---
- ----- ------- -
-------------------
-
-
--------- ---------------- -
----- --------------------------------- ---------------
-4. 数据的规范化
在 Redux 中，我们经常看到一些相对重复的数据，如评论、回复等。对于这些数据，我们可以使用规范化来减少存储空间，并且易于管理和维护。例如，我们可以使用以下结构规范化评论和回复。
-- -------------------- ---- -------
-
------ -
----- -
-- -
--- --
----- -----
--
-- -
--- --
----- -----
--
--
------- --- ---
--
--------- -
----- -
-- -
--- --
------- -----
----- --
-------- ---------
-------- ----
--
-- -
--- --
------- --
----- --
-------- ---------
-------- ---
--
--
------- --- ---
--
-5. 使用 Reselect 进行数据过滤和计算
Reselect 是 Redux 的一个非常强大的库，它可以帮助我们进行数据过滤和计算。当我们需要从大量的数据中过滤出特定的数据，或在大量数据上执行更复杂的计算时，Reselect 是一个非常强大的工具。
const postsSelector = (state) => state.posts; const postCountsSelector = createSelector( postsSelector, (posts) => posts.length ); console.log(postCountsSelector(state));
示例代码
下面是一个基于 React 和 Redux 的示例代码，它使用 Redux-thunk 来处理异步请求，使用 Reselect 来计算数据。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------------ ----------- - ---- --------------
------ - -------------- - ---- -----------
------ - ---------- - ---- -------------------------
----- ------------- - ------- -- -----------------
----- ------------ - ------- -- -----------
----- ----------------- - ---------------
--------------
-------------
------- ----- --
---------------- -- --
--------
--------- ---------------
------ -- ------- --- ------------
-------
---
--
----- --- - -- -- -
----- -------- - --------------
----- ----- - -------------------------------
----- - --------- - - ---------------------------
----- - ----- ----- - - --------------------------
------------ -- -
-----------------------
-- ------------
------ -
--
---------- - -
-----------------
- - -
---------------- -- -
---- --------------
---------------------
------------------
---
-- --------------------------------
----
------
--
--
---
--
--
------ ------- ----结论
Redux 是状态管理库，可以使前端开发更加高效，使用 React 配合 Redux 进行开发有助于处理复杂数据。本文详细阐述了 Redux 与 React 共同开发的最佳实践，并提供了示例代码。希望这篇文章能够帮助大家更好地实现 Redux 与 React 的联合开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670655d4d91dce0dc85bed59