一个动作更新多个减速器性能问题答案

【问题标题】：one action updates multiple reducers performance issue一个动作更新多个减速器性能问题
【发布时间】：2020-03-03 00:34:40
【问题描述】：

在当前的应用程序中，我设置了多个 redux reducer 来存储数据。让我们称它们为“user-reducers”和“pet-reducers”。这两个非常相似，它们都有一个帖子[]。现在，每当用户喜欢帖子 [] 中的帖子时，就会触发一个动作“likeDone”。现在我有 2 种选择来实现 redux 更新：

选项 1：“user-reducers”和“pet-reducers”都听“likeDone”。 IMO，这在后期阶段效率低下，因为我有更多类似的减速器并且所有这些减速器都列在一个动作中。

选项 2：将“likeDone”更改为 2 个更明确的操作，例如。 'likeUserPostDone' 'likePetPostDone' 每个reducer都会对匹配的动作做出反应。这样，reducer 更新似乎更有效，但稍后会有更多操作类型，最终会出现大量“switch - case”，我不确定这是否是一个好习惯。

感谢阅读，请告诉我最适合我的情况。

【问题讨论】：

任何reducer都不应该影响其他基于Action类型的reducer。为其他人定义不同的动作类型。
@VahidAkhtar 好的，谢谢，那就是选项 2。
stackoverflow.com/questions/48052571/… 有用吗？
嗯@OzanBulut 发送的主题似乎与您的评论相矛盾。您能否进一步说明为什么应该像您所说的那样？
@VahidAkhtar ??? reducer 不应该有副作用，（&& 相互影响），它们应该只返回状态。减速器仅根据动作类型而变化。当 FETCH_SUCCESS 时，我修改了我的 waitForData 减速器和我的数据减速器。我的 UI 隐藏了微调器并显示了数据。当 FETCH_FAIL 时，我隐藏微调器并显示错误

标签： reactjs redux reducers redux-actions

【解决方案1】：

让两个 reducer 监听你的动作，如果它们在动作发生时都发生了变化。所有 redux reducer 都有效地监听所有调度的动作。如果它不改变状态，他们会忽略动作。

const petPostReducer = (prev = defaultValue, action = {}) => {
  const { type, payload} = action;
  switch (type) {
    case "LIKE_DONE": {
      const {id} = payload || {};
      const oldItem = prev[id] || {}
      const newItem = {...oldItem, like: true}
      return {
        ...prev
        [id]: {...updateItem, [id]: newItem};
    }
    default: {
      return prev; // Ignore all other actions != LIKE_DONE
    }
  }
};

创建更显式的操作很好，但是当您有不同的操作时，您通常希望这样做。（总有例外）

如果可能，请避免在 reducer 中使用逻辑。

如果宠物和用户数据非常相似，请考虑更改您的状态形状并使用一个 reducer 帖子。

console.log(state.posts) =>
{
   0: {type: 'user' like: false},
   1: {type: 'pet' like: false},
   2: {type: 'user' like: true},
}

请避免premature optimization。我经常做一些效率较低的事情，以支持简单、简洁、不可变、可读和有用的代码。如果您的目标是功能手机或发现真正的性能瓶颈，则需要使用性能监控工具进行测量。 JavaScript 引擎优化不断改进，结果往往令人惊讶。

【讨论】：