在前端开发中，使用 Redux 可以帮助我们更好地组织和管理数据，但是随着应用变得更加复杂， Redux 的 action 也变得越来越庞大，难以维护。这时，redux-nested-actions 这个 npm 包就能大显身手。它提供了一种方式来组织 Redux action，使其更加可读、易于维护和扩展。
安装
安装 redux-nested-actions 很简单，只需要在项目中运行以下命令即可：
npm install redux-nested-actions
使用
使用 redux-nested-actions 时，需要在 store 中使用 nestedCombineReducers 而不是 Redux 中的 combineReducers 函数。下面是一个示例：
-- -------------------- ---- ------- ------ - ----------- - ---- ------- ------ - --------------------- - ---- ---------------------- ------ ------------ ---- ---------------- ------ ----------------------- ---- --------------------------- ----- ----------- - ----------------------- ------ ------------- ----------------- ----------------------- -- ----- ----- - ------------------------
在上面的示例中，我们将 todos 和 visibilityFilter 作为对象传递给 nestedCombineReducers 函数。这意味着我们将使用两个独立的 reducer 来处理这两个对象的更新。
接下来，我们需要定义我们的 nested actions。在这里，我们使用 redux-actions 这个包来创建我们的 action。
import { createAction } from 'redux-actions'
export const addTodo = createAction('ADD_TODO')
export const toggleTodo = createAction('TOGGLE_TODO')
export const setVisibilityFilter = createAction('SET_VISIBILITY_FILTER')在上面的示例中，我们只定义了最基本的 actions。但是，我们可以更进一步，将它们分组到单个对象中，并用 namespace 属性命名它们，以便更好地组织我们的代码：
-- -------------------- ---- ------- ------ - ------------ - ---- --------------- ------ ----- ------------ - - -------- ------------------------------- ----------- --------------------------------- - ------ ----- ----------------------- - - -------------------- ------------------------------------------------------- -
在上面的示例中，我们将 addTodo 和 toggleTodo 分组到一个名为 todosActions 的对象中，并将 setVisibilityFilter 放在名为 visibilityFilterActions 的对象中。同时，我们使用 / 定义了一个命名空间。
最后，在我们的组件中，我们可以使用 bindNestedActionCreators 函数来绑定 actions，并将它们传递给 connect 函数。
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- - ---- -------------
------ - ------------------------ - ---- ----------------------
------ - ------------- ----------------------- - ---- -----------
----- ------- ------- --------------- -
-- ---
-
----- ------------------ - -------- -- --
-------- -
------------- -------------------------------------- ----------
------------------------ ------------------------------------------------- ---------
-
--
------ ------- ------------- ----------------------------在上面的示例中，我们将 todosActions 和 visibilityFilterActions 绑定到了我们的组件中，然后就可以在组件中直接使用：
class TodoApp extends React.Component {
handleAddTodo = () => {
const { actions: { todosActions } } = this.props
todosActions.addTodo('New Todo')
}
// ...
}总结
redux-nested-actions 提供了一种更好的方式来组织 Redux action，使其更加可读、易于维护和扩展。我们可以将 actions 分组到单个对象中，并使用 namespace 属性来命名它们。在组件中，我们可以使用 bindNestedActionCreators 函数来绑定 actions，并将它们传递给 connect 函数。这能够提高代码的可读性，减少了代码重复和维护的成本。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8bbf