在前端开发中，Redux 是一种最常见的状态管理工具之一。它使得我们可以轻松地管理复杂的应用程序状态，并拥有一些非常优秀的开源库和工具。其中一个非常优秀的工具就是 @gik/redux-factory。
@gik/redux-factory 是一个 Redux 工厂，可以非常容易地帮助您创建 Redux actions、reducers、sagas 和 selectors 以及其他不同的 state management 工具。
安装
首先，您需要在项目中安装 @gik/redux-factory。您可以使用 npm：
npm install @gik/redux-factory --save
使用
接下来，我们将看到如何使用 @gik/redux-factory 为 Redux 创建 Actions 和 Reducers。在这个例子中，我们将创建一个简单的用户登录应用程序。
Actions
@gik/redux-factory 允许我们为每个 action 创建一个工厂函数。这可以让我们在应用程序中很容易地重用 actionTypes 和 action payloads。
首先，我们创建一个 actionType：
export const USER_LOGIN = '[User] Login';
然后，我们可以使用 createAction 工厂函数来创建一个 action creator：
import { createAction } from '@gik/redux-factory';
export const userLogin = createAction(USER_LOGIN, (username, password) => ({ username, password }));现在，我们可以在应用程序的其他地方使用 userLogin action creator 函数来创建我们的 Action。
import { userLogin } from './actions';
dispatch(userLogin('michael', '123456'));Reducers
接下来，我们将使用 @gik/redux-factory 创建 Reducers。一个 reducer 是一个带有 state 和 action 参数的函数。根据 actionType，reducer 返回新 state。
-- -------------------- ---- -------
------ - ------------- - ---- ---------------------
----- ------------ - -
----- -----
------ -----
--
------ ----- ----------- - --------------------------- -
------------- ------- - ------- -- -- --
---------
----- -----------------
---
---在上面的例子中，createReducer 函数接受一个初始状态和一个对象字面量，其中包含这些 actionType 的 reducer。在我们的例子中，我们只定义了 USER_LOGIN reducer。
如果需要，您可以使用 handleAction 函数编写自定义 reducer。
import { handleAction } from '@gik/redux-factory';
export const userReducer = handleAction(USER_LOGIN, (state, { payload }) => ({
...state,
user: payload.username,
}), initialState);示例代码
您可以在以下代码示例中看到完整的 @gik/redux-factory 应用程序。
actions.js
import { createAction } from '@gik/redux-factory';
export const USER_LOGIN = '[User] Login';
export const userLogin = createAction(USER_LOGIN, (username, password) => ({ username, password }));reducers.js
-- -------------------- ---- -------
------ - ------------- - ---- ---------------------
------ - ---------- - ---- ------------
----- ------------ - -
----- -----
------ -----
--
------ ----- ----------- - --------------------------- -
------------- ------- - ------- -- -- --
---------
----- -----------------
---
---sagas.js
-- -------------------- ---- -------
------ - ----------- --- - ---- ---------------------
------ - ----------- --------- - ---- ------------
------ --------- ----------------- ------- -- -
--- -
-- ------- ----- --- ----
----- ------------------------------- ----- -------
- ----- --- -
---------------
-
-
------ --------- ----------- -
----- ---------------------- -----------------
-总结
在本教程中，我们了解了如何使用 @gik/redux-factory 创建 Redux Actions 和 Reducers，并使用 sagas 添加更多的状态管理功能。通过使用 @gik/redux-factory，我们可以快速轻松地创建应用程序并管理我们的状态。
如果您正在寻找一个快速创建和管理复杂状态和 actions 的方式，那么 @gik/redux-factory 是一个非常实用的库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60059e9781e8991b448ed4bc