介绍
redux-page-scope 是一个可以帮助前端开发者更好地管理 Redux store 中页面级别的状态的 npm 包。 它允许你以页面为单位分离和组织 Redux 的状态管理，这样能清晰地将页面和其相关的状态分离出来，大大提升了使用 Redux 的开发效率。
安装
在你的项目中通过 npm 进行安装：
npm install redux-page-scope --save
界面模块
使用 redux-page-scope，创建一个新的页面模块时，你需要做的第一件事就是定义一个 namespace，它是唯一标识你的页面状态的字符串，作为该页面唯一标识符的一部分，因此需要保持全局唯一性。 namespace 是你将注册所有相关的 reducer 和 action 的入口点。
定义一个 namespace 的示例代码：
import { definePageScope } from 'redux-page-scope'
const BLOG_NAMESPACE = '@@namespace/BLOG';
const blogPageScope = definePageScope(BLOG_NAMESPACE);以上代码定义了一个名为 BLOG_NAMESPACE 的常量，作为该页面状态的命名空间。通过 definePageScope 方法创建了一个新的 blogPageScope 的对象。
Reducer
直接在你的页面模块中定义 reducer 即可。redux-page-scope 将自动将它们包装在命名空间下。 现在，reducer 可以接受来自其他 redux 模块的 action。
示例代码：
-- -------------------- ---- -------
----- ----------- - ------ - --- ------- -- -
------ ------------- -
---- ----------- -
----- - --- ------ ------- - - ---------------
------ -
---------
----- -
------
--------
--
--
-
--------
------ ------
-
--
-------------------------------------------在上述代码中，blogReducer 存在于页面模块 blogPageScope 内部，使用 blogPageScope.registerReducer 方法注册到页面模块中。
Action
定义在页面模块上的 action 以页面为单位进行分离和组织。 通过页面模块的命名空间和 action 名称定义在全局范围内它们是唯一的。
示例代码：
-- -------------------- ---- -------
----- ------- - ---- ------ -------- -- -
------ -
----- ----------------------------------
-------- -
---
------
--------
--
--
--在代码中，blogPageScope.getType 方法返回的 action type 是全局唯一的，包括传递给 redux store 的 action。 如果你有同样名称的 action 在全局范围内，redux-page-scope 将自动抛出一个错误。
Store
在创建应用程序 store 的时候，需要将页面模块中的 reducer 组合成一个顶级的 reducer。
示例代码：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ - ------------- - ---- --------- -- --------- ----- ----------- - ----------------- ------------------------------- --------------------------- -- --------- ------- --- ----- ----- - -------------------------
在上述代码中，rootReducer 是组合所有页面模块的 reducer 的一个实例。blogPageScope.getReducer() 方法返回页面模块的 reducer 函数。
使用
现在你已经注册了页面模块，你可以通过 blogPageScope 的名称使用它们。 它们现在是全局的，可以使用你熟悉的 redux 方法来调用它们。
示例代码：
-- -------------------- ---- -------
------ - ------- - ---- --------------
----- --------- ------- --------------- -
-------- -
----- - ----- - - -----------
------ -
----
----------------------------- -- -
--- ---------------------------------------------------------------------
---
-----
--
-
-
----- --------------- - ------- -- --
------ ------------------------------------
---
------ ------- ------------------------------------在上述代码中，mapStateToProps 函数返回一个包含所有的博客文章，用于在 BlogPosts 组件中进行渲染。
总结
redux-page-scope 是一个非常有用的 npm 包，它允许你更好地管理 Redux store 中的页面级别的状态。 通过将页面状态分离出来并组织，您可以更容易地在 Redux 中管理它们，并更快地编写前端应用程序。我们不仅学习到了如何安装，创建、注册、使用页面模块，同时还介绍了 reducer、action 和 store 的使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700ce361a36e0bce8c66