在前端开发中，通过 Redux 管理应用的状态是一种非常流行的方式。Redux 可以通过定义 action、reducer 和 store 等构建一个完整的应用状态管理系统。
而在实际项目中，我们经常需要对 Redux 进行一些扩展或者优化。在这时，我们便需要借助一些优秀的 npm 包。
redux-action-reducer-mapper 就是其中一个非常好用的 npm 包，它可以帮助我们更加优雅地定义 action 和 reducer。
功能介绍
redux-action-reducer-mapper 提供了以下三个主要功能：
- 定义 action 和 reducer 的映射关系；
- 支持创建 thunk action；
- 支持监听某个 reducer 的状态变化。
这些功能的结合使用，可以让我们更加方便地管理 Redux 状态。
安装
可以通过 npm 在项目中安装 redux-action-reducer-mapper。
npm install --save redux-action-reducer-mapper
使用
定义 action 和 reducer 的映射关系
redux-action-reducer-mapper 的主要特点是可以让我们将 actions 和 reducers 集中在一起管理，下面是使用这个库的基本步骤：
- 定义一个 action 名称列表，通常是一个对象，也可以是一个常量列表。
比如，下面定义了一个名称为 user 的 action：
export const ACTIONS_USER = {
GET_USER_INFO: 'get_user_info',
SET_USER_INFO: 'set_user_info'
}- 定义 reducer 状态初始值和各个 action 对应的 reducer 函数。
比如，下面的 user.js 文件定义了一个 reducer 来管理用户信息：
-- -------------------- ---- -------
------ - ------------- - ---- -----------------------------
------ - ------------ - ---- -----------------
----- ------------ - -
--------- --
-
------ ------- --------------------------- -
----------------------------- ------- ------- -- -
------ -
---------
--------- --------------
-
--
----------------------------- ------- ------- -- -
------ -
---------
--------- --------------
-
-
--- 定义 action 函数，并将 action 和 reducer 对应起来。
比如，下面的 user.js 文件定义了一个 action 来请求用户信息：
import { createAction } from 'redux-action-reducer-mapper'
import { ACTIONS_USER } from './user'
import api from '../api'
export const getUserInfo = createAction(ACTIONS_USER.GET_USER_INFO, async (params) => {
const res = await api.getUserInfo(params)
return res.data
})- 最后，我们需要将 reducer 注册到 Redux 的
store上。
import ReducerManager from 'redux-action-reducer-mapper';
import { createStore } from 'redux';
import user from './reducers/user'
const reducerManager = ReducerManager.getInstance();
reducerManager.add(user.reducer, 'user');
const store = createStore(reducerManager.getCombinedReducer());创建 thunk action
为了方便管理复杂业务场景下的异步操作，redux-action-reducer-mapper 支持创建 thunk action。
在上面的例子中，我们的 getUserInfo action 函数就是一个 thunk action，它可以在异步获取用户信息之后，通过 dispatch 交给 reducer 管理。
当然，redux-action-reducer-mapper 还提供了一些基本的工具来帮助我们更方便地创建 thunk action。比如，我们可以使用 createThunkAction 来创建一个带有 loading 状态管理的异步 action：
-- -------------------- ---- ------- ------ - ------------------ ------------ - ---- ----------------------------- ------ - ------------ - ---- -------- ------ --- ---- -------- ------ ----- ----------- - --------------------------------------------- ----- -------- -- - ----- --- - ----------------------- ------ -------- --
监听 reducer 状态变化
除了上面介绍的两个功能之外，redux-action-reducer-mapper 还提供了一个非常有用的监听 reducer 状态变化的功能，它可以帮助我们更好地理解应用程序的状态变化。
具体来说，我们可以使用 addStateChangeListener 函数来注册一个 reducer 的状态变化监听器。当这个 reducer 的状态发生变化时，将会自动触发注册的监听器。
-- -------------------- ---- ------- ------ -------------- ---- ------------------------------ ------ - ----------- - ---- -------- ------ ---- ---- ----------------- ----- -------------- - ----------------------------- -------------------------------- -------- --------------------------------------------- ------- -- - ------------------- --- ----- ----- - ------------------------------------------------- ----------------------------------------- ---- - ----
结语
通过上述介绍，相信大家已经初步了解如何使用 redux-action-reducer-mapper 优雅地管理 Redux 状态了。
当然，redux-action-reducer-mapper 还提供了更多的功能，如：管理多个 Redux 状态、重置状态等等。大家可以进一步了解它的官方文档，掌握更为高级的使用技巧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067009e361a36e0bce8c0c