React 是一个非常流行的 JavaScript 库，用于构建用户界面。随着应用程序的增长，状态管理变得越来越困难。为了解决这个问题，React 社区已经开发了多个状态管理库，例如 Redux 和 MobX。本文将介绍如何在 React 工程中使用这些库来管理状态。
Redux 状态管理
Redux 是一个流行的状态管理库，它可以帮助我们管理 React 应用程序的状态。Redux 的核心思想是将应用程序状态保存在一个单一的存储库中，并使用纯函数来更新状态。
安装和设置 Redux
安装 Redux 可以使用 npm 或 yarn：
npm install redux # 或 yarn add redux
要使用 Redux，需要创建一个存储库。这个存储库将保存整个应用程序的状态。要创建一个存储库，请使用 Redux 的 createStore 函数，如下所示：
import { createStore } from 'redux';
import rootReducer from './reducers';
const store = createStore(rootReducer);在这个例子中，我们使用 createStore 函数创建了一个存储库，并传递了一个名为 rootReducer 的函数。rootReducer 函数将用于处理存储库中的所有状态更新。
创建 Redux reducers
Redux 的 reducer 是一个纯函数，它接收当前状态和一个操作，然后返回一个新的状态。下面是一个示例 reducer：
-- -------------------- ---- -------
----- ------------ - -
------ -
--
-------- -------------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-在这个示例中，我们创建了一个名为 counterReducer 的 reducer。这个 reducer 接收一个名为 state 的对象，并将其初始化为一个包含 count 属性的对象。然后，根据传入的操作类型（INCREMENT 或 DECREMENT），它会返回一个新的状态对象。
使用 Redux
一旦你创建了一个存储库，并定义了 reducer，你就可以使用 Redux 来管理你的应用程序状态了。下面是一个示例组件，它使用 Redux 存储库来管理计数器的状态：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
----- ------- ------- --------------- -
-------- -
----- - ------ ---------- --------- - - -----------
------ -
-----
---------- ------------
------- ------------------------------
------- ------------------------------
------
--
-
-
-------- ---------------------- -
------ -
------ -----------
--
-
-------- ---------------------------- -
------ -
---------- -- -- ---------- ----- ----------- ---
---------- -- -- ---------- ----- ----------- --
--
-
------ ------- ------------------------ -----------------------------在这个示例中，我们使用 Redux 的 connect 函数将组件连接到 Redux 存储库。我们还定义了两个函数：mapStateToProps 和 mapDispatchToProps。mapStateToProps 函数将存储库中的状态映射到组件的属性中。mapDispatchToProps 函数将操作映射到组件的属性中。
我们在组件中使用这些属性来更新计数器的状态。当用户单击“+”按钮时，我们将调用 increment 函数，并将一个名为 INCREMENT 的操作发送到存储库中。当用户单击“-”按钮时，我们将调用 decrement 函数，并将一个名为 DECREMENT 的操作发送到存储库中。
MobX 状态管理
MobX 是另一个流行的状态管理库，它与 Redux 的工作方式有所不同。MobX 通过自动跟踪状态的变化来管理状态，而不需要手动编写 reducer。下面是一个示例 MobX 应用程序：
安装和设置 MobX
安装 MobX 可以使用 npm 或 yarn：
npm install mobx mobx-react # 或 yarn add mobx mobx-react
要使用 MobX，需要创建一个存储库。这个存储库将保存整个应用程序的状态。要创建一个存储库，请使用 MobX 的 observable 和 action 函数，如下所示：
-- -------------------- ---- -------
------ - ----------- ------ - ---- -------
----- ------------ -
----------- ----- - --
------- ----------- -
-------------
-
------- ----------- -
-------------
-
-
----- ----- - --- ---------------在这个例子中，我们创建了一个名为 CounterStore 的存储库。这个存储库包含一个名为 count 的 observable 属性，以及两个名为 increment 和 decrement 的 action。当我们调用 increment 或 decrement 函数时，它们将自动更新 count 属性。
使用 MobX
一旦你创建了一个存储库，你就可以使用 MobX 来管理你的应用程序状态了。下面是一个示例组件，它使用 MobX 存储库来管理计数器的状态：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- -------------
---------
----- ------- ------- --------------- -
-------- -
----- - ------ ---------- --------- - - -----------------
------ -
-----
---------- ------------
------- ------------------------------
------- ------------------------------
------
--
-
-
------ ------- --------在这个示例中，我们使用 MobX 的 observer 函数将组件连接到 MobX 存储库。我们还从组件的属性中获取存储库，并使用存储库中的属性和操作来更新计数器的状态。
结论
Redux 和 MobX 都是很好的状态管理库，它们可以帮助我们管理 React 应用程序的状态。Redux 通过手动编写 reducer 来管理状态，而 MobX 通过自动跟踪状态的变化来管理状态。你可以根据你的需求选择其中一个，或者根据你的应用程序的需要使用两个库。无论你选择哪个，你都需要确保你的状态管理适合你的应用程序，并且易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6742c31b99516187acd0714b