时间戳

首页 > 解决方案 > 一个动作更新多个减速器性能问题

reactjs - 一个动作更新多个减速器性能问题

问题描述

在当前的应用程序中，我设置了多个 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”，我不确定这是否是一个好习惯。

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

标签： reactjsreduxreducersredux-actions

解决方案

如果两个 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 中使用逻辑。

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

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

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

推荐阅读