在前端开发中，Redux 是常用的状态管理工具。而使用 Redux，就离不开 action 和 reducer。然而，管理action和reducer也会变得十分繁琐。为了简化这些操作，开发者往往需要使用 Redux 工具包。这篇文章将指导你使用 redux-actions-utils，这是一个非常实用的 npm 包，可帮助你更轻松地管理 Redux 状态。
安装
你可以用以下命令在你的项目中安装 redux-actions-utils：
npm install redux-actions-utils --save
使用
createAction
要创建一个 action，你需要定义一个 action 类型和 payload（载荷）对象。这个操作可以变得很繁琐，不过使用 redux-actions-utils 包，你可以使用 createAction 函数轻松地生成 action。
import { createAction } from "redux-actions-utils";
const increment = createAction("INCREMENT");
dispatch(increment()); // { type: "INCREMENT" }
const addItem = createAction("ADD_ITEM", "item");
dispatch(addItem("apple")); // { type: "ADD_ITEM", payload: "apple" }createReducer
当要管理状态时，你需要一个 reducer 函数。这个函数将取得先前的状态，并根据动作来更新状态。 redux-actions-utils 提供了 createReducer 函数，可以方便地管理状态。
-- -------------------- ---- ------- ------ - ------------- - ---- ---------------------- ----- ------------ - - ------ - -- ----- --------- - -------------------------- ----- -------------- - --------------------------- - ------------ ------- -- -- ------ ----------- - - --- --- ----- ----- - ------------------------- ---- ------------------- -- - ------ - - ----- ------ - --------------------- ------------- -------------------- -- - ------ - -
createTypes
在使用 Redux 时，你通常需要定义多个 action 类型。使用 redux-actions-utils 的 createTypes 方法，可以帮助你轻松定义这些 action 类型。它接收一个对象，对象的键表示 action 类型的名称，而它的值则应该是你要使用的字符串。
import { createTypes } from "redux-actions-utils";
const types = createTypes({
INCREMENT: "INCREMENT",
DECREMENT: "DECREMENT",
});
console.log(types); // { INCREMENT: "INCREMENT", DECREMENT: "DECREMENT" }createAsyncActions
当你在发起异步操作时，会涉及到多个不同状态的 action，例如 FETCH_USER_REQUEST、FETCH_USER_SUCCESS 和 FETCH_USER_FAILURE。你可以使用 createAsyncActions 来自动生成这些 action。
import { createAsyncActions } from "redux-actions-utils";
const fetchUser = createAsyncActions("FETCH_USER");
console.log(fetchUser.REQUEST); // FETCH_USER_REQUEST
console.log(fetchUser.SUCCESS); // FETCH_USER_SUCCESS
console.log(fetchUser.FAILURE); // FETCH_USER_FAILURE示例代码
一个基本的计数器应用程序的示例。在这个示例中，我们将使用 createAction 和 createReducer 函数创建一个 INCREMENT 动作和一个计数器 reducer 函数。我们也将使用 createTypes 函数创建另外两个动作类型。最后使用 combineReducers 合并多个 reducers。
-- -------------------- ---- ------- ------ - ------------- -------------- ----------- - ---- ---------------------- ------ - --------------- - ---- -------- ----- ----- - ------------- ---------- ------------ ---------- ------------ --- ------ ----- --------- - ------------------------------ ------ ----- --------- - ------------------------------ ------ ----- ------------ - - ------ - -- ------ ----- -------------- - --------------------------- - ------------ ------- -- -- ------ ----------- - - --- ------------ ------- -- -- ------ ----------- - - --- --- ------ ----- ----------- - ----------------- -------- --------------- --- ------ ----- ----------- - ------- -- --------------------
现在，你可以在组件中使用这些动作和 reducer 了。假设你使用 react-redux 来管理状态，你只需要将这些内容打包到你的 reducer 中，如下所示：
import { rootReducer } from "./store";
// ...
const store = createStore(rootReducer);结论
借助 redux-actions-utils，管理 Redux 状态将变得更容易。这个包提供了一个简单的方式来生成 action 和 reducer 函数。使用这个软件包，你将能够更快地编写代码，因为你不再需要覆盖每个 action 和 reducer！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556f281e8991b448d3d57