在一个中大型 Web 应用中，我们经常会遇到需要在多个页面中共享状态的问题。这些状态可能包括用户信息、用户权限、应用配置等等，这些状态应该被统一管理，以便于于开发者和维护者更方便地管理和使用它们。Redux 就是为了解决这个问题而生的。
Redux 简介
Redux 是一个 JavaScript 应用程序状态容器，提供了可预测性的状态管理。Redux 的核心概念包括：
- Store：存储应用程序的状态；
- Action：描述应用程序的发起变化所必须的信息，是一个普通对象；
- Reducer：描述应用程序的状态如何相应地发生变化，接收
Action和旧状态作为输入，产生新状态作为输出。
使用 Redux，我们可以将应用程序的状态存储到一个全局的 Store 中。我们可以发出 Action 来描述状态的变化。当 Action 被发出时，Redux 中注册的 Reducer 将会被调用，产生一个新的状态。新的状态将被存储到 Store 中，同时通知相关的 UI 组件更新。
有了 Redux，我们可以更精细和可控地管理应用程序的状态。但是，在多个页面共享状态时，我们需要一些额外的步骤，以确保这些状态一致性。
如何处理多个页面的状态
在多个页面使用 Redux，我们需要进行下面的步骤：
在页面加载时，初始化 Redux Store。我们可以在页面的入口处（通常是
index.html或App.js文件）中创建 Redux Store。例如：------ - ----------- - ---- -------- ------ ----------- ---- ------------- -- ---- ------- ----- ----- - -------------------------
定义一组共享的 Reducer。因为不同页面可能会使用不同的 Reducer，我们需要将共享的 Reducer 在单独的文件中定义，并在需要使用它的页面中引入。例如：
-- --- ------- ----- ------------------ ----- ------------- - ------ - --- ------- -- - ------ ------------- - --- -------- ------ ------ - -- ------ ------- -------------- -- ----- ------------- --------- -------------- ------ - --------------- - ---- -------- ------ ------------- ---- --------------------- ----- ----------- - ----------------- ------- -------------- -- ------- ------- --- --- ----- ----- - -------------------------将 Redux Store 传递给需要使用它的组件。例如，在 React 中，我们可以使用
react-redux提供的Provider组件将 Store 传递给根组件。例如：------ - -------- - ---- -------------- ------ ----- ---- ---------- ------ --- ---- -------- ---------------- --------- -------------- ---- -- ------------ ------------------------------- --在需要使用 Store 的组件中使用
connect函数获取 Store 中的数据和 Action Creator。例如：------ - ------- - ---- -------------- ------ - ------------------ - ---- -------- ------ - -------------- - ---- --------------------- ----- --------------- - ------- -- -- --------- -------------------- --- ----- ------------------ - ---------- -- -------------------- --------------- --- -- ---------- ------ ------- ------------------------ ---------------------------------
在上面的例子中，我们使用 connect 函数将 username 和 changeUsername 绑定到 MyComponent 组件中。
示例代码
下面是一个使用 Redux 处理多个页面状态的简单示例。
首先，我们定义一个共享的 Reducer，保存用户信息：
-- ----------------
----- ------------ - -
--------- ---
------ ---
--
----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------------
------ -
---------
--------- ---------------
--
---- ---------------
------ -
---------
------ ---------------
--
--------
------ ------
-
--
------ ------- ------------接下来，在需要使用用户信息的页面中引入该 Reducer，并将其与页面特定的 Reducer 合并：
-- ---------------- ------ - --------------- - ---- -------- ------ ----------- ---- ------------------- ------ -------------- ---- ---------------------- ----- ----------- - ----------------- ----- ------------ -------- --------------- -- ------- ------- --- --- ----- ----- - -------------------------
在页面组件中，使用 connect 函数获取用户信息，并将其渲染到 UI 上：
------ - ------- - ---- --------------
----- ------- ------- --------------- -
-------- -
------ -
-----
------------ --------------------------
--------- ----------------------
---
------
--
-
-
----- --------------- - ------- -- --
--------- --------------------
------ -----------------
---
------ ------- ----------------------------------最后，我们可以发出 Action 更新用户信息：
------ - ------- - ---- --------------
------ - ------------------ - ---- --------
------ - --------------- ----------- - ---- ------------------
----- ------- ------- --------------- -
-------------------- - --- -- -
------------------------------------------
--
----------------- - --- -- -
---------------------------------------
--
---
-
----- ------------------ - ---------- -- --------------------
---------------
------------
-- ----------
------ ------- ------------------------ -----------------------------结论
在一个中大型 Web 应用中，Redux 可以帮助我们更好地管理应用程序的状态。在多个页面共享状态时，我们需要对应用程序的结构进行一些调整，以便于更好地使用 Redux。
在使用 Redux 时，我们需要：
- 定义一组共享的 Reducer，以存储和更新共享的状态；
- 将 Redux Store 传递给需要使用它的组件；
- 在需要使用 Store 的组件中使用
connect函数获取 Store 中的数据和 Action Creator； - 使用 Action Creator 更新和操作状态。
以上步骤可以帮助我们更好地使用 Redux 管理应用程序的状态，提高应用程序的可维护性和可扩展性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673517140bc820c5824c94c1