简介
Redux 是一个用于 JavaScript 应用程序的预测性状态容器。Redux-Make 是一个专门为 Redux 构建的命令行工具，可以快速创建 Redux 的常见模块。本篇文章将详细介绍如何使用 Redux-Make。
安装
首先，需要在项目中安装 Redux 和 Redux-Make。可以通过以下命令在项目根目录中进行安装：
npm install redux redux-make --save-dev
使用
创建 Reducer
可以使用以下命令来生成一个 Redux Reducer：
npx redux-make reducer <reducer-name> [<reducer-path>]
在这里，<reducer-name> 是生成的 reducer 的名称，<reducer-path> 是可选的生成的 reducer 的路径。如果没有提供路径，则会在 src/reducers 目录下创建该 reducer。
例如，可以通过以下命令在 src/reducers 目录下创建一个名为 todos 的 reducer：
npx redux-make reducer todos
这将创建一个包含初始状态和空操作的 reducer，并将其输出到 src/reducers/todos.js。
创建 Action
可以使用以下命令来生成一个 Redux Action:
npx redux-make action <action-name> [<action-args>] [<action-path>]
在这里，<action-name> 是生成的 action 的名称，<action-args> 是可选的 action 参数列表，<action-path> 是可选的输出路径。如果没有提供路径，则会在 src/actions 目录下创建该 action。
例如，可以通过以下命令在 src/actions 目录下创建一个名为 addTodo 的 action：
npx redux-make action addTodo text
这将创建一个接受一个 text 参数的 addTodo action，并将其输出到 src/actions/addTodo.js。
创建 Async Action
可以使用以下命令生成一个异步的 Redux Action：
npx redux-make async-action <action-name> [<action-args>] [<action-path>]
在这里，<action-name> 是生成的 action 的名称，<action-args> 是可选的 action 参数列表，<action-path> 是可选的输出路径。如果没有提供路径，则会在 src/actions 目录下创建该 action。
例如，可以通过以下命令在 src/actions 目录下创建一个名为 fetchTodos 的异步action：
npx redux-make async-action fetchTodos
这将创建一个名为 fetchTodos 的异步action，并将其输出到 src/actions/fetchTodos.js。
创建 Selector
可以使用以下命令生成一个 Redux Selector：
npx redux-make selector <selector-name> [<selector-path>]
在这里，<selector-name> 是生成的 selector 的名称，<selector-path> 是可选的输出路径。如果没有提供路径，则会在 src/selectors 目录下创建该 selector。
例如，可以通过以下命令在 src/selectors 目录下创建一个名为 getTodos 的 selector：
npx redux-make selector getTodos
这将创建一个名为 getTodos 的 selector，并将其输出到 src/selectors/getTodos.js。
示例
下面是一个示例，用于演示如何使用 Redux-Make：
首先，我们在项目根目录中创建一个 todos reducer：
npx redux-make reducer todos
这将创建一个名为 todos 的 reducer 并将其输出到 src/reducers/todos.js。
接下来，我们创建一个添加新 todo 的 action：
npx redux-make action addTodo text
这将创建一个名为 addTodo 的 action，并将其输出到 src/actions/addTodo.js。在此之后，src/actions/addTodo.js 文件将如下所示：
export const addTodo = (text) => ({
type: 'ADD_TODO',
payload: { text },
});然后，我们创建一个名为 toggleTodo 的异步action：
npx redux-make async-action toggleTodo
这将创建一个名为 toggleTodo 的异步action，并将其输出到 src/actions/toggleTodo.js。在此之后，src/actions/toggleTodo.js 文件将如下所示：
-- -------------------- ---- -------
------ ----- ----------------- - ---- -- --
----- ----------------------
---
---
------ ----- ----------------- - ---- -- --
----- ----------------------
---
---
------ ----- ----------------- - ------- -- --
----- ----------------------
------
---
------ ----- ---------- - ---- ---------- -- ---------- -- -
--------------------------------
------ ------------------------- - ------- ------ ----- ---------------- --------- -- --
-------- -- -
--------------------------------
--
-------------- -- -
-----------------------------------
---
--最后，我们创建一个名为 getTodos 的 selector：
npx redux-make selector getTodos
这将创建一个名为 getTodos 的 selector，并将其输出到 src/selectors/getTodos.js。在此之后，src/selectors/getTodos.js 文件将如下所示：
export const getTodos = (state) => state.todos;
总结
Redux-Make 是一个非常实用的工具，可以帮助我们快速创建常见的 Redux 模块，从而提高我们的开发效率。在本文中，我们介绍了如何使用 Redux-Make 来生成 Redux Reducer、Action、Async Action 和 Selector，并提供了一些示例代码。希望本文能够对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8aec