Redux 的设计问题：当您想要创建一个 Redux 操作来调度其他 Redux 操作时，您应该这样做吗？答案

【问题标题】：Design question for Redux: When you want to make a Redux action to dispatch other Redux actions, should you?Redux 的设计问题：当您想要创建一个 Redux 操作来调度其他 Redux 操作时，您应该这样做吗？
【发布时间】：2021-04-12 16:13:42
【问题描述】：

我正在慢慢地将 Redux 添加到 React 应用程序中。不是所有状态，而是应用程序中许多不同组件使用的状态。

有一个名为saveOrRemoveNewItemOrBlankItem() 的函数可以由多个事件触发。我想把它变成一个单一的 Redux 动作，或者，至少我不想在调度动作的任何地方都重复相同的逻辑，例如：

if(item.isBlank){
  store.dispatch(removeItem())
} else {
  store.dispatch(saveItem())
}

最好只调用一项操作（尽管名称很长）：

  store.dispatch(saveOrRemoveNewItemOrBlankItem())

我知道一个 Redux 操作创建者可以（使用 thunk 中间件）调度其他 Redux 操作，并且已经在一些地方这样做了。但是，如果我想通过使用 ReduxJS/Toolkit CreateSlice 在样板文件上节省时间，这是不可能的（或者至少我不知道是否可能）。我可以接受更多样板文件，但我想知道......调用其他操作的操作是否非常“un-Redux”（在这种情况下，saveOrRemoveNewItemOrBlankItem 有条件地调用saveItem 或removeItem）？实现这一目标的正确设计路线是什么？肯定不会在多个地方编写相同的条件逻辑......是否有另一层可以从反应组件本身卸载此责任？ React 的新手（ish）和 Redux 的新手。对解决这个特定示例的兴趣不如对最佳实践的掌握好。想法、意见、事实、专业知识、才华横溢……我错过了什么？

【问题讨论】：

标签： javascript redux react-redux

【解决方案1】：

在另一个动作中组合动作很好，你不希望在你的组件中使用这种逻辑是正确的。使用 createSlice 时，您不需要 thunk 来执行此操作：

const slice = createSlice(/** stuff that creates slice */);
const sliceWithCombinedAction = {
  ...slice,
  actions: {
    ...slice.actions,
    commitItem(item) {
      return item.isBlanc
        ? slice.actions.removeItem()
        : slice.actions.saveItem();
    },
  },
};
export default sliceWithCombinedAction;

【讨论】：