一个动作更新多个 reducer 性能问题

Question

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

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

选项 2：将 'likeDone' 更改为 2 个更明确的操作，例如。 'likeUserPostDone' 'likePetPostDone' 并且每个减速器都会对匹配的动作做出反应。这样，reducer 更新似乎更有效，但以后会有更多的操作类型，最终会出现很多 'switch - case'，我不确定这是否是一个好的做法。

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

Answer 1

如果在动作发生时它们都发生变化，则让两个减速器都听你的动作。所有 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 帖子。

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

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

一个动作更新多个 reducer 性能问题

one action updates multiple reducers performance issue

reducers

reactjs

redux

redux-actions