介绍
redux-simple-models 是一个用来管理 React 和 React Native 应用程序状态的 npm 包。它使用 Redux 的 store 和 reducer 来存储和处理应用程序状态。
redux-simple-models 的主要功能是让应用程序状态更加易于管理和组织。通过 redux-simple-models，您可以将应用程序状态拆分为多个子状态，并通过简单的配置文件将它们组合在一起。
安装
要在您的项目中使用 redux-simple-models，请使用 npm 安装它：
npm install redux-simple-models --save
配置
在您的项目中，您需要创建一个 models 目录来保存您的应用程序状态配置。在 models 目录中，您需要为每个子状态创建一个单独的配置文件。
例如，假设您的应用程序需要管理一个购物车和一个用户配置文件。在 models 目录中，您将需要创建两个文件：
-- -------------------- ---- -------
-- --------------
----- ------------ - - ------ -- -
------ ------- -
----- -------
------ -------------
--------- -
-------------- -------- -
------ -
---------
------ ---------------- --------
-
--
----------------- -------- -
------ -
---------
------ ------------------------- -- ------- --- -----------
-
-
-
-
-- ---------------------
----- ------------ - - ----- --- ------ --- ---- ---- -
------ ------- -
----- --------------
------ -------------
--------- -
-------------- -------- -
------ -
---------
----- -------
-
--
--------------- -------- -
------ -
---------
------ -------
-
--
------------- -------- -
------ -
---------
---- -------
-
-
-
-在每个配置文件中，每个子状态都有一个名称、初始状态和一组 reducers。reducers 是用来更新子状态的纯函数。每个 reducer 接收当前子状态和一个负载作为参数，并返回更新后的子状态。
创建 store
在您的应用程序中，您需要将所有的子状态组合成一个单一的状态树，并将其传递给 Redux 的 createStore 函数来创建 store。
-- -------------------- ---- ------- -- -------- ------ - ------------ --------------- - ---- ------- ------ ---- ---- --------------- ------ ----------- ---- ---------------------- ----- ----------- - ----------------- ------------ -------------- ------------------- -------------------- -- ----- ----- - ------------------------ ------ ------- -----
在 rootReducer 中，我们使用 combineReducers 将每个子状态的 reducer 组合在一起。我们使用子状态的名称作为 reducer 的键，以确保每个子状态都在其自己的命名空间中。
在组件中使用 redux-simple-models
在您的组件中，您可以使用组件的 connect 函数将 redux-simple-models 中的子状态订阅到您的组件中：
-- -------------------- ---- -------
-- ----------
------ ----- ---- -------
------ - ------- - ---- -------------
------ ---- ---- ---------------
----- ------ ------- --------------- -
--------- -
----- ---- - - --- -------------- ------ --- ----- -
------------------------
-
-------- -
------ -
-----
------ ---------
----
---------------------------- -- -
--- -------------------------------
---
-----
------- ----------- -- ------------------- -------------
------
-
-
-
----- --------------- - ------- -- -
------ -
------ ----------------------
-
-
----- ------------------ - ---------- -- -
------ -
-------- ------ -- -
----------
----- -----------------------
-------- ----
--
-
-
-
------ ------- --------
----------------
------------------
---------在 mapStateToProps 中，我们从 store 中获取 cart 子状态，并将其作为 props 传递给 MyCart 组件。
在 mapDispatchToProps 中，我们将 addItem 函数映射到 cart 子状态的 addItem reducer 中。方法中 dispatch 一个包含子状态名称、操作名称和负载的 action，这个 action 将被发现和处理。
示例代码
您可以在我 GitHub 上的 redux-simple-models-example 中查看完整的示例代码，该示例代码演示了如何使用 redux-simple-models 来管理应用程序状态。
总结
redux-simple-models 是一个非常有用的 npm 包，用于简化 React 和 React Native 应用程序的状态管理。它使应用程序状态更易于组织，并使状态更新更加易于理解。
通过本文，我们了解了如何配置 redux-simple-models、如何使用 createStore 和 combineReducers 创建 store，以及如何在组件中使用 connect 函数订阅子状态。我们还提供了一个完整的示例代码，以供学习和参考。该代码可以用作您自己的项目的起点。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8b67