在现代的 Web 应用程序开发中，Redux 可能是最常用的状态管理库之一。它可以帮助您更轻松地管理应用程序状态，构建可维护的代码库。但是，对于新手开发者来说，学习 Redux 可能是一项具有挑战性的任务。
在此时，redux-mastermind 这款 npm 包就为 Redux 的学习和实际应用提供了很大的帮助。本文将向您介绍如何使用 redux-mastermind 这个 npm 包。
Redux-Mastermind 简介
redux-mastermind 是一个为 Redux 应用程序提供了一些辅助函数以帮助您更轻松地编写代码的 npm 包。它可以帮助您实现以下内容：
- 避免大量重复的 reducer 和 action 代码
- 为异步操作提供方便的辅助函数
- 与 Redux Devtools 集成
安装 Redux-Mastermind
要使用 redux-mastermind ，您必须先安装它。您可以通过 npm 进行安装：
npm install redux-mastermind --save
使用 Redux-Mastermind
接下来，我们将创建一个示例并演示如何使用 redux-mastermind 。
首先，让我们创建一个简单的 Redux 应用程序，该应用程序由一个应用程序状态和多个 actions 组成。我们还将创建一个 reducer 来管理该状态。以下是我们需要的代码：
-- -------------------- ---- -------
-- -------
----- ---------------- - -------------------
----- -------- - -----------
-- ------ --------
----- -------------------- - ---- -- --
----- -----------------
--
---
----- ------------- - ------- -- --
----- ---------
-----
---
-- -------
----- ------------ - - ------ -- --
----- ------- - ------ - ------------- ------- -- -
------------------- -
---- -----------------
------ -
---------
------ -------------------- -- ------- --- --------- - --------- ---------- ----- - -----
--
---- ---------
------ -
---------
------ -
---------------
- --- ------------------ - -- ------ ------------- ---------- ----- -
-
--
--------
------ ------
-
--这是一个非常简单的 Redux 应用程序，其中有两个 actions：一个是将 todo 标记为完成，另一个是添加新 todo 。
现在，我们将介绍如何使用 redux-mastermind 来简化和优化这些代码。
Action 类型
首先，让我们看一下如何使用 redux-mastermind 来管理 action 类型。我们可以使用 ActionMastermind 函数来管理应用程序中所有的 actions 类型。
import { ActionMastermind } from 'redux-mastermind';
export const MARK_AS_COMPLETE = ActionMastermind.defineType('MARK_AS_COMPLETE');
export const ADD_TODO = ActionMastermind.defineType('ADD_TODO');我们现在定义了一些常量 MARK_AS_COMPLETE 和 ADD_TODO，它们的值是由 ActionMastermind 助手函数生成的。
此时这样改的好处是什么？这显然是更易于维护和解决问题。
Action creators
我们接下来将尝试使用 ActionMastermind 来重构 action creators 代码。
import { createActionCreator } from 'redux-mastermind';
export const markAsCompleteAction = createActionCreator(MARK_AS_COMPLETE, 'id');
export const addTodoAction = createActionCreator(ADD_TODO, 'title');使用 createActionCreator 函数，我们可以创建一个方法来生成相应的 actions。
在这里，我们定义了两个 action creators：markAsCompleteAction 和 addTodoAction。它们的功能与我们之前定义的带有相应参数的方法相同，但它们有更少的代码，并且与 redux-mastermind 相结合，使得我们的应用程序更易于维护。
Reducers
最后，我们将使用 redux-mastermind 重构 reducer 代码。
-- -------------------- ---- -------
------ - ------------- - ---- -------------------
----- ------------ - - ------ -- --
------ ----- ------- - --------------------------- -
------------------- ------- ------- -- -
------ -
---------
------ -------------------- -- ------- --- --------- - --------- ---------- ----- - -----
--
--
----------- ------- ------- -- -
------ -
---------
------ -
---------------
- --- ------------------ - -- ------ ------------- ---------- ----- -
-
--
-
---使用 createReducer 函数，我们可以创建一个 reducer 函数并将其与相应的 action 类型相关联。
在这里，我们只需将 action 类型与要执行的函数相关联即可。这个函数接收应用程序状态和 action 对象作为参数，并返回一个新的应用程序状态。与之前的实现相比，它大大减少了代码量。
异步操作
我们应该如何处理异步操作？ redux-mastermind 提供了许多辅助函数来为异步操作提供支持。接下来，我们将研究这些函数的指导。
异步 actions
createAsyncActionCreator 函数允许我们使用同步的方式处理异步的 actions。
例如，让我们使用 createAsyncActionCreator 函数重构之前定义的 addTodoAction：
-- -------------------- ---- -------
------ - ------------------------ - ---- -------------------
------ ----- ------------- - -------------------------
---------
------- -- -
------ --- ----------------- -- -
------------- -- -
--------- ----- ---
-- ------
---
-
--这里，我们首先在 createAsyncActionCreator 函数中传递了两个参数：一个是 action 类型，另一个是一个返回 Promise 的函数。该函数将在调用 action creator 的时候执行。
这个使用异步 actions 的代码看起来很有趣，但也引起了另一个问题：如何让 reducer 函数处理异步返回值？这是我们接下来要介绍的。
异步 reducer
createReducertohandleAsyncActions 函数允许我们使用同步的方式处理异步的 reducer
在这里，我们将重构 reducer 并使用 createReducertohandleAsyncActions 辅助函数：
-- -------------------- ---- -------
------ - --------------------------------- - ---- -------------------
----- ------------ - - ------ -- --
------ ----- ------- - ----------------------------------------------- -
------------------- ------- ------- -- -
------ -
---------
------ -------------------- -- ------- --- ----------------- - --------- ---------- ----- - -----
--
--
----------- ------- ------- -- -
------ -
---------
------ -
---------------
- --- ------------------ - -- ------ --------------------- ---------- ----- -
-
--
-
---与之前定义的 reducer 函数相比，此函数接受的对象使用了之前所定义的带有 payload 属性的 actions。
综合示例
下面是一个示例，使用了之前所介绍的所有技术。
-- -------------------- ---- -------
------ - ----------------- ---------------------------------- ------------------------- ------------------- - ---- -------------------
------ ----- ---------------- - ------------------------------------------------
------ ----- -------- - ----------------------------------------
------ ----- -------------------- - ------------------------------------- ------
------ ----- ------------- - -------------------------
---------
------- -- -
------ --- ----------------- -- -
------------- -- -
--------- ----- ---
-- ------
---
-
--
----- ------------ - - ------ -- --
------ ----- ------- - ----------------------------------------------- -
------------------- ------- ------- -- -
------ -
---------
------ -------------------- -- ------- --- ----------------- - --------- ---------- ----- - -----
--
--
----------- ------- ------- -- -
------ -
---------
------ -
---------------
- --- ------------------ - -- ------ --------------------- ---------- ----- -
-
--
-
---以上是使用 redux-mastermind 的简化示例，它许多方面的优势可以带来代码质量和可读性的提升。
Redux Devtools 集成
redux-mastermind 还提供了一种简单的方式来与 Redux Devtools 集成。
首先，要在我们的代码库中安装 redux-devtools-extension npm 包。
npm install redux-devtools-extension
然后，在 store.js（或某个其他文件，负责创建 Redux 应用程序的地方）中，我们可以使用 redux-devtools-extension 来简单地进行集成。
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import { reducer } from './reducers';
const store = createStore(
reducer,
composeWithDevTools(applyMiddleware())
);此代码使用了 composeWithDevTools 来启用 Devtools 插件，以便更轻松地进行调试我们的 Redux 应用程序。
总结
在本文中，我们介绍了如何使用 redux-mastermind 进行 Redux 应用程序的开发，重点介绍了它提供的一些辅助函数以及它们可以带来的好处。此外，我们还了解了如何使用异步 actions 以及它们要如何在 reducer 函数中处理，以及如何与 Redux Devtools 集成。希望这篇文章对您有所帮助，使您的 Redux 应用程序更加优雅和易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8b00