Redux 是一个流行的状态管理库，广泛应用于 React 项目中。Redux 可以帮助开发者管理应用程序的数据流，但是 Redux 本身的 API 比较复杂，需要开发者投入大量的时间和精力才能掌握。为了简化 Redux 的使用和数据管理，redux-ducks 包应运而生。
redux-ducks 是一个 Redux 代码结构和组织规范。和 Redux 相比，redux-ducks 更加简洁和易于维护。在使用 redux-ducks 的过程中，开发者可以更加专注于业务逻辑的开发，而不是耗费大量的时间和精力在 Redux 代码的管理和组织上。接下来，我们将介绍如何使用 redux-ducks。
安装
你可以通过 npm 安装 redux-ducks:
npm install redux-ducks
使用
使用 redux-ducks 主要包括定义状态管理的各个部分以及创建 Redux store。
定义状态管理的各个部分
redux-ducks 通过将一个模块的 types, actions 和 reducers 都放在一起提供一种更加明确、可预测且易于管理的方式。
types
假设我们制定了一个计数器模块，我们可以像下面这样定义模块的 types：
export const INCREMENT = 'counter/INCREMENT'; export const DECREMENT = 'counter/DECREMENT';
actions
下面是一个 actions 的例子：
export const incrementCounter = () => ({
type: INCREMENT
});
export const decrementCounter = () => ({
type: DECREMENT
});initialState
我们还需要定义模块的初始状态。初始状态一个普通的 JavaScript 对象。
const initialState = {
count: 0
};reducers
我们需要定义 reducer 来更新我们的状态:
-- -------------------- ---- -------
------ ------- -------- ------------- - ------------- ------- -
------ ------------- -
---- ----------
------ -
---------
------ ----------- - -
--
---- ----------
------ -
---------
------ ----------- - -
--
--------
------ ------
-
-创建 Redux store
在我们定义了类型、序列化、初始状态和 reducer 后，我们需要创建 Redux store。我们可以使用 combineDucks 从定义好的模块中创建 rootReducer。
import { createStore, combineReducers } from 'redux';
import counter from './counter';
const rootReducer = combineReducers({ counter });
const store = createStore(rootReducer);现在，我们已经创建了 Redux 应用程序的中心 store，可以像往常一样地使用它了！
深入 Redux Ducks 的设计模式
redux-ducks 的设计模式是基于模块的，每个模块都包括 reducer、action 和 selector。一个典型的 redux-ducks 模块通过将一个 Redux 应用程序的状态划分为不同的领域来实现：
src/
domain/
cart.js
products.js
shared/
ui.js例如，我们可以将购物车和产品定义为一个域，将 UI 定义为一个共享域。
在每个模块中，我们提供一个 reducer 函数来实现状态更新逻辑。我们还提供一组 action 创建函数来帮助生成特定 action。最后，我们还提供一组 selector 函数，用于选择与该领域相关的数据。
结论
因为redux-ducks为我们提供了一种容易理解的方式来管理 Redux 应用程序的状态，它使我们能够更快，更轻松地编写和维护更大型的应用程序。因此，如果你正在使用 redux，你应该考虑使用 redux-ducks。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8bc9