0

我有以下对象，这是我在减速器中的初始状态：

const INITIAL_STATE = {
  campaign_dates: {
    dt_start: '',
    dt_end: '',
  },
  campaign_target: {
    target_number: '',
    gender: '',
    age_level: {
      age_start: '',
      age_end: '',
    },
    interest_area: [],
    geolocation: {},
  },
  campaign_products: {
    survey: {
      name: 'Survey',
      id_product: 1,
      quantity: 0,
      price: 125.0,
      surveys: {},
    },
    reward: {
      name: 'Reward',
      id_product: 2,
      quantity: 0,
      price: 125.0,
      rewards: {},
    },
  },
}

我的减速器正在监听一个动作来为我的奖励对象添加奖励：

    case ADD_REWARD:
      return {
        ...state, campaign_products: {
          ...state.campaign_products,
          reward: {
            ...state.campaign_products.reward,
            rewards: {
              ...state.campaign_products.reward.rewards,
              question: action.payload
            }
          }
        }
      }

到目前为止一切都很好（尽管添加的每个对象都被命名为“问题”）......它的工作但它相当混乱。我尝试使用 immutability-helper 将上面的减速器替换为类似的东西，但是 newObh 被添加到我的状态的根目录中

case ADD_REWARD:
   const newObj = update(state.campaign_products.reward.rewards, { $merge: action.payload });
   return { ...state, newObj }
4

1 回答 1

2 
return { ...state, newObj }

首先，您必须了解对象速记是如何工作的。如果你熟悉 ES2015 之前的语法，上面的代码翻译成：

return Object.assign({}, state, {
  newObj: newObj
});

请注意如何同时newObj成为键和值，这可能不是您想要的。

我假设提到immutability-helper的是这个库：https ://www.npmjs.com/package/immutability-helper 。给定文档，它会根据第二个参数返回具有更新属性的状态副本。

您在深层属性上使用它，以便它将为该深层属性返回一个新值。因此，您仍然必须将其合并到 中state，因此您必须保持您标记为混乱的方法。

你想要的是这样的：

const nextState = update(state, {
  $merge: {
    campaign_products: {
      reward: {
        rewards: action.payload
      }
    }
  }
});

return nextState;

请注意第一个参数如何是当前state对象，而$mergeobject 是您要更新属性的整个对象结构。的返回值update是state基于第二个参数的更新值，即下一个状态。

旁注：正如您所发现的，使用深层状态结构很困难。我建议您考虑规范化状态形状。如果适用，您还可以将化简器拆分为仅负责部分状态的子树，因此状态更新更小。

于 2019-12-28T20:35:48.677 回答