在前端开发中，随着应用规模的扩大，状态管理变得尤为重要。Redux 是一种常用的状态管理工具，在开发中起到了非常重要的作用。Redux 的主要工作流程包括：通过 action 触发 reducer，更新 store。
在实际开发中，我们通常会将 action、reducer 和 store 抽离出来，以便于代码组织和维护。下面我们将具体介绍这一过程，并给出示例代码。
抽离 action
首先，我们需要定义 Redux 的 action。在 Redux 中，action 是一个普通的 JavaScript 对象，用于描述发生了什么事情。它包含一个 type 字段和一些可选的数据。
我们可以将所有的 action 定义在一个单独的文件中，例如 actions.js。示例代码如下：
-- -------------------- ---- -------
------ ----- ------------- - ----------------
------ ----- ------------- - ----------------
------ ----- -------------- - -----------------
------ ----- -------------- - -----------------
------ ----- ------------ - ------ -- -
------ -
----- --------------
-----
--
--
------ ----- ------------ - ------- -- -
------ -
----- --------------
------
--
--
------ ----- ------------- - -- -- -
------ -
----- ---------------
--
--
------ ----- ------------- - ------- -- -
------ -
----- ---------------
------
--
--在这个示例代码中，我们定义了四个 action 类型，分别用于描述登录成功、登录失败、退出成功和退出失败的情况。同时，我们定义了四个 action 创建函数，用于创建对应的 action。这样，在我们需要调用这些 action 时，只需要导入对应的函数，而不需要手动创建 action 对象。
抽离 reducer
接下来，我们需要定义 Redux 的 reducer。在 Redux 中，reducer 是一个纯函数，用于描述如何更新应用的状态。它接受两个参数：当前的状态和要处理的 action，返回一个新的状态。
我们可以将所有的 reducer 定义在一个单独的文件中，例如 reducers.js。示例代码如下：
-- -------------------- ---- -------
------ -
--------------
--------------
---------------
---------------
- ---- ------------
----- ------------ - -
----- -----
------ -----
--
----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- --------------
------ -
---------
----- ------------
------ -----
--
---- --------------
------ -
---------
----- -----
------ -------------
--
---- ---------------
------ -
---------
----- -----
------ -----
--
---- ---------------
------ -
---------
------ -------------
--
--------
------ ------
-
--
------ ------- ------------在这个示例代码中，我们定义了一个名为 authReducer 的 reducer，用于处理关于用户身份验证的 action。该 reducer 接受两个参数，分别是当前的状态和要处理的 action。根据不同的 action 类型，我们使用不同的逻辑更新状态。在代码中，我们使用了展开运算符 ... 以确保返回一个新的对象，而不是修改原来的对象。
抽离 store
最后，我们需要将 Redux 的 store 抽离出来。在 Redux 中，store 是一个单一的对象，包含了所有的应用状态。我们可以通过 createStore 函数来创建一个新的 store 实例，并将 reducer 传递给它以处理应用状态的更新。
我们可以将 store 的初始化代码写在一个单独的文件中，例如 store.js。示例代码如下：
import { createStore } from "redux";
import authReducer from "./reducers";
const store = createStore(authReducer);
export default store;在这个示例代码中，我们使用 createStore 函数创建了一个新的 store 实例，并将 authReducer reducer 传递给它以处理应用状态的更新。我们将 store 导出以便于在其他模块中使用。
总结
以上就是在 Redux 中如何抽离出 action、reducer 和 store 的完整流程。我们可以将所有的 action、reducer 和 store 分别定义在不同的文件中，以便于代码组织和维护。通过统一管理这些文件，我们可以快速地开发出实用且易于维护的 Redux 应用程序。
示例代码已发布到 GitHub 上：redux-architectural-patterns。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647b8373968c7c53b06edf29