简介
redux-namespaced-actions 是一个用于在 Redux 应用中创建命名空间的 npm 包。它提供了一个轻量级的解决方案，帮助开发者在大型 Redux 应用中管理和组织 action。
安装
通过 npm 安装 redux-namespaced-actions 包：
$ npm install redux-namespaced-actions
基础
创建命名空间
使用 createNamespace 函数创建一个命名空间：
import { createNamespace } from 'redux-namespaced-actions';
const namespace = createNamespace('myApp');创建 action
使用 createAction 函数创建一个 action：
import { createAction } from 'redux-namespaced-actions';
const increment = createAction('INCREMENT');在命名空间下创建 action
使用 namespace.createAction 创建在命名空间下创建一个 action：
import { createNamespace } from 'redux-namespaced-actions';
const namespace = createNamespace('myApp');
const increment = namespace.createAction('INCREMENT');创建 reducer
使用 createReducer 函数创建一个 reducer：
-- -------------------- ---- -------
------ - ------------- - ---- ---------------------------
----- ------------ - -
------ --
--
----- ------- - --------------------------- --------- -- -
-------------------------- ------- ------- -- -
--------------
---
---在命名空间下创建 reducer
使用 namespace.createReducer 创建一个在命名空间下的 reducer：
-- -------------------- ---- -------
------ - --------------- - ---- ---------------------------
----- --------- - -------------------------
----- --------- - ------------------------------------
----- ------------ - -
------ --
--
----- ------- - ------------------------------------- --------- -- -
-------------------------- ------- ------- -- -
--------------
---
---实例
普通的 Redux 应用
在普通的 Redux 应用中，我们通常会按照 reducer 类型进行分类，比如对于计数器应用，有一个名为 counter 的 reducer，我们可以使用如下方式进行开发：
-- -------------------- ---- -------
------ - ---------------- ----------- - ---- --------
----- ---------------- - --------------------
----- ---------------- - --------------------
----- ------- - ------ - - ------ - -- ------- -- -
------ ------------- -
---- -----------------
------ - --------- ------ ----------- - - --
---- -----------------
------ - --------- ------ ----------- - - --
--------
------ ------
-
--
----- ----------- - -----------------
--------
---
----- ----- - -------------------------
------ ------- ------这里我们将 counterIncrement 和 counterDecrement 带上了前缀 counter，这样做虽然可以区分出这两个 action 是属于 counter reducer，但这样做会导致 action 的 type 变得臃肿且重复。使用 redux-namespaced-actions 可以解决这个问题：
-- -------------------- ---- -------
------ - --------------- - ---- ---------------------------
------ - ---------------- ----------- - ---- --------
-- ----
----- --------- - ---------------------------------
------ ----- --------- - ------------------------------------
------ ----- --------- - ------------------------------------
-- -------
----- ------- - ------------------------
- ------ - --
--------- -- -
-------------------------- ------- ------- -- -
--------------
---
-------------------------- ------- ------- -- -
--------------
---
-
--
----- ----------- - -----------------
--------
---
----- ----- - -------------------------
------ ------- ------在这里我们使用 createNamespace 函数创建了一个命名空间，然后使用 namespace.createAction 创建了一个在命名空间下的 increment action，以及一个在命名空间下的 decrement action。最后使用 namespace.createReducer 创建了一个在命名空间下的 reducer。
多个 reducer 的 Redux 应用
在多个 reducer 的 Redux 应用中，我们通常需要对 action 进行更细致的分类，比如对于计数器应用，我们有两个 reducer，分别为 counter1 和 counter2，我们可以使用如下方式进行开发：
-- -------------------- ---- -------
------ - ---------------- ----------- - ---- --------
----- ----------------- - ---------------------
----- ----------------- - ---------------------
----- ----------------- - ---------------------
----- ----------------- - ---------------------
----- -------- - ------ - - ------ - -- ------- -- -
------ ------------- -
---- ------------------
------ - --------- ------ ----------- - - --
---- ------------------
------ - --------- ------ ----------- - - --
--------
------ ------
-
--
----- -------- - ------ - - ------ - -- ------- -- -
------ ------------- -
---- ------------------
------ - --------- ------ ----------- - - --
---- ------------------
------ - --------- ------ ----------- - - --
--------
------ ------
-
--
----- ----------- - -----------------
---------
---------
---
----- ----- - -------------------------
------ ------- ------这里我们不仅将 counter1INCREMENT 和 counter1DECREMENT 带上了前缀 counter1，还将 counter2INCREMENT 和 counter2DECREMENT 带上了前缀 counter2，这样做的缺点和普通的 Redux 应用一样。这里我们使用 redux-namespaced-actions 来简化开发：
-- -------------------- ---- -------
------ - --------------- - ---- ---------------------------
------ - ---------------- ----------- - ---- --------
-- ----
----- ---------- - ----------------------------------
----- ---------- - ----------------------------------
------ ----- -------- - -
---------- -------------------------------------
---------- -------------------------------------
--
------ ----- -------- - -
---------- -------------------------------------
---------- -------------------------------------
--
-- -------
----- --------------- - -------------------------
- ------ - --
--------- -- -
----------------------------------- ------- ------- -- -
--------------
---
----------------------------------- ------- ------- -- -
--------------
---
-
--
----- --------------- - -------------------------
- ------ - --
--------- -- -
----------------------------------- ------- ------- -- -
--------------
---
----------------------------------- ------- ------- -- -
--------------
---
-
--
----- ----------- - -----------------
--------- ----------------
--------- ----------------
---
----- ----- - -------------------------
------ ------- ------在上面的代码中，我们创建了两个命名空间 namespace1 和 namespace2，然后在每个命名空间下创建了 counter1 和 counter2 对象，这个对象分别包含命名空间下的 increment 和 decrement 两个 action。最后我们分别使用 namespace1.createReducer 和 namespace2.createReducer 创建了在命名空间下的 reducer。
结论
redux-namespaced-actions 可以帮助开发者在大型 Redux 应用中管理和组织 action，将不同的 reducer 以及它们下面的 action 进行命名空间的分类，提高 Redux 应用的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8bbd