在前端开发中，Redux 是一个非常流行的状态管理工具。而 redux-external-dispatchers 这个 npm 包就是一个用来处理 Redux 状态管理的工具，它提供了一种方便的方法，能够在外部组件中实现 Redux 的 dispatch 机制。
什么是 redux-external-dispatchers？
redux-external-dispatchers 是 Redux 状态管理库的一个 npm 包，它提供了一种简单而强大的方法，能够在外部组件中使用 Redux 的 dispatch 机制。通过这种方法，我们可以避免在组件内部编写繁琐的 Redux 代码，实现更为简洁的代码结构。
如何使用 redux-external-dispatchers？
首先，在项目中使用以下命令安装 redux-external-dispatchers：
npm install redux-external-dispatchers --save
然后，在 Redux store 的创建过程中，我们需要注册 redux-external-dispatchers 中的 middleware，这段代码应该放在其它 middleware 的前面：
import { createStore, applyMiddleware } from 'redux';
import { createExternalDispatchMiddleware } from 'redux-external-dispatchers';
const store = createStore(reducer, applyMiddleware(createExternalDispatchMiddleware()));接着，在我们的组件中引入 externalDispatch 函数，如下所示：
import { externalDispatch } from 'redux-external-dispatchers';现在，我们就可以在组件中使用 externalDispatch 函数来调用 store 中的 dispatch 方法了。例如，我们可以在组件中这样使用：
externalDispatch({ type: 'ADD_TODO', text: 'Learn Redux' });以上代码就是使用外部 dispatch 的方式，这里的 type 和 text 就是 Redux 中定义的 action。
redux-external-dispatchers 的指导意义
使用 redux-external-dispatchers 可以帮助我们在组件代码中避免编写繁琐的 Redux 代码，提高代码的可读性和易维护性。同时，这个 npm 包还提供了一种方便的方式，让我们能够更好地控制 Redux 的状态管理机制，让我们的应用更加健壮和灵活。
示例代码
以下是一个简单的计数器应用，它使用 redux-external-dispatchers 库来进行状态管理。首先，我们可以定义一个包含计数器数据的 reducer：
-- -------------------- ---- -------
----- ------------ - -
------ --
--
-------- -------------------- - ------------- ------- -
------ ------------- -
---- ------------
------ -
------ ----------- - --
--
---- ------------
------ -
------ ----------- - --
--
--------
------ ------
-
-现在，我们需要定义一个包含计数器组件的 App：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------------- - ---- -----------------------------
-------- ----- -
----- -------------- - -- -- -
------------------ ----- ----------- ---
--
----- -------------- - -- -- -
------------------ ----- ----------- ---
--
------ -
-----
----------- --------
----------- ------ ------------
------- -------------------------------------------
------- -------------------------------------------
------
--
-
------ ------- ----最后，我们需要将这个 App 组件包装在 Provider 组件中，并包含 Redux store：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- - ---- --------
------ - -------- - ---- --------------
------ - -------------------------------- - ---- -----------------------------
------ -------------- ---- -------------------
------ --- ---- --------
----- ----- - --------------------------- ------------------------------------
-------- ---------- -
------ -
--------- --------------
---- --
-----------
--
-
------ ------- ---------至此，我们就完成了一个使用 redux-external-dispatchers 库进行状态管理的计数器应用。这个示例代码展示了如何使用 redux-external-dispatchers 来简化 Redux 状态管理的代码，提高了可读性和易维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600555a181e8991b448d2bf4