React 是一种流行的 JavaScript 库，用于构建大型单页应用程序。在这些应用程序中，状态管理变得越来越复杂，因此需要一种全局状态管理的解决方案。本文将介绍一些在 React 中使用全局状态管理的最佳实践，包括使用 Redux 和 MobX。
Redux
Redux 是一个流行的状态管理库，它提供了一个单一的状态存储，称为“store”。Redux 的核心概念是“actions”、“reducers”和“store”。Actions 描述了发生了什么，reducers 根据 action 更新状态，而 store 是状态的单一来源。
安装和配置
要在 React 中使用 Redux，首先需要安装它。可以使用 NPM 或 Yarn 进行安装：
npm install redux
或
yarn add redux
安装完成后，需要配置 Redux。首先，需要创建一个 reducers.js 文件，该文件包含所有 reducer 函数。然后，需要创建一个 store.js 文件，该文件导入 reducers 和 Redux 的 createStore 函数，并使用它来创建一个新的 store。
reducers.js：
-- -------------------- ---- -------
----- ------------ - -
------ -
--
-------- -------------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
------ - -------------- --store.js：
import { createStore } from "redux";
import { counterReducer } from "./reducers";
const store = createStore(counterReducer);
export default store;在组件中使用 Redux
要在组件中使用 Redux，需要将它们连接到 store。可以使用 React Redux 库来完成这一点。React Redux 提供了两个主要的组件：Provider 和 connect。
Provider 组件接收一个 store 属性，并使其可用于所有后代组件。connect 函数用于连接组件到 store，并将 store 中的状态作为组件的 props 传递。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
----- ------- ------- --------------- -
-------- -
------ -
-----
---------- -----------------------
------- -------------------------------------------------
------- -------------------------------------------------
------
--
-
-
-------- ---------------------- -
------ -
------ -----------
--
-
-------- ---------------------------- -
------ -
---------- -- -- ---------- ----- ----------- ---
---------- -- -- ---------- ----- ----------- --
--
-
------ ------- ------------------------ -----------------------------在这个例子中，Counter 组件连接到 store，并使用 mapStateToProps 函数将 count 状态作为组件的 props 传递。mapDispatchToProps 函数将 increment 和 decrement 操作作为 props 传递。
异步操作
在现代的单页应用程序中，异步操作变得越来越常见。Redux 提供了一个叫做“thunk”的中间件，用于处理异步操作。Thunk 允许 action 创建函数返回一个函数而不是一个对象，从而使它们能够处理异步操作。
要使用 thunk，需要安装 redux-thunk 中间件：
npm install redux-thunk
或
yarn add redux-thunk
然后，在创建 store 时将它添加到 applyMiddleware 函数中：
import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import { counterReducer } from "./reducers";
const store = createStore(counterReducer, applyMiddleware(thunk));
export default store;现在，可以编写 action 创建函数来处理异步操作。例如，以下代码使用 fetch API 从 API 加载数据：
-- -------------------- ---- -------
-------- ---------- -
------ -------- -- -
---------- ----- --------- ---
------------------
-------------- -- ----------------
---------- -- ---------- ----- -------------- -------- ---- ---
------------ -- ---------- ----- -------- -------- ----- ----
--
-Redux 的优点
Redux 提供了一个单一的状态存储，使得状态管理变得更加容易。它也是可预测的，因为状态的变化只能通过 actions 而发生。Redux 还提供了一个方便的调试工具，可以帮助开发人员更轻松地调试应用程序。
MobX
MobX 是另一个流行的状态管理库，它提供了一种更简单的方式来管理状态。在 MobX 中，状态是可观察的，意味着当状态发生变化时，与之相关的组件将自动更新。
安装和配置
要在 React 中使用 MobX，需要安装它。可以使用 NPM 或 Yarn 进行安装：
npm install mobx mobx-react
或
yarn add mobx mobx-react
安装完成后，需要配置 MobX。首先，需要创建一个 store.js 文件，该文件包含所有状态和操作。然后，需要使用 MobX 的 Provider 组件将其提供给所有后代组件。
store.js：
-- -------------------- ---- -------
------ - ----------- ------ - ---- -------
----- ------------ -
----------- ----- - --
-------
----------- -
-------------
-
-------
----------- -
-------------
-
-
----- ------------ - --- ---------------
------ ------- --------------- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- -------------
------ ------------ ---- ----------
---------
----- ------- ------- --------------- -
-------- -
------ -
-----
---------- -------------------------
------- ----------- -- --------------------------------------------
------- ----------- -- --------------------------------------------
------
--
-
-
------ ------- --------异步操作
在 MobX 中处理异步操作非常简单。由于状态是可观察的，因此只需在异步操作完成后更新状态即可。
-- -------------------- ---- -------
------ - ----------- ------ - ---- -------
----- --------- -
----------- ---- - ---
-------
---------- -
------------------
-------------- -- ----------------
---------- -- ---------- - ------
------------ -- ----------------------
-
-
----- --------- - --- ------------
------ ------- ------------ -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- -------------
------ --------- ---- ----------
---------
----- ---- ------- --------------- -
------------------- -
---------------------
-
-------- -
------ -
-----
------------------------ -- -
---- -------------------------------
---
------
--
-
-
------ ------- -----MobX 的优点
MobX 提供了一种更简单的方式来管理状态。它是可观察的，因此当状态发生变化时，与之相关的组件将自动更新。MobX 还提供了一个方便的调试工具，可以帮助开发人员更轻松地调试应用程序。
结论
在 React 中使用全局状态管理是构建大型单页应用程序的关键。Redux 和 MobX 都提供了一种优秀的解决方案。Redux 提供了一个单一的状态存储，使得状态管理变得更加容易，而 MobX 提供了一种更简单的方式来管理状态。无论选择哪种方案，都需要仔细考虑应用程序的需求，并遵循最佳实践。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675b956ba4d13391d8f3f27a