更新 Redux 中的旧值和新值答案

【问题标题】：Update the Old and New Value in Redux更新 Redux 中的旧值和新值
【发布时间】：2021-04-05 01:41:02
【问题描述】：

在我的 redux react 应用程序中更新数组的旧值时遇到问题。我已经成功更新了新的选定对象true。我想将其他对象设置为false，因为我已将另一个对象设置为true。

const initialState = {
  annualPlans: [],
};

const planReducer = (state = initialState, action) => {
  switch (action.type) {
    case planConstants.UPGRADE_PLAN_SUCCESS:
      return {
        ...state,
        annualPlans: state.annualPlans.map((todo) =>
          todo.value === action.data.plan_id
            ? // transform the one with a matching id
              { ...todo, current: true }
            : // otherwise return original todo
              todo
        ),
      };
    default:
      return state;
  }
};

【问题讨论】：

标签： reactjs redux ecmascript-6 react-redux

【解决方案1】：

您似乎想为其他人返回 current 设置为 false：

          todo.value === action.data.plan_id
            ? // transform the one with a matching id
              { ...todo, current: true }
            : // otherwise return with current false
              { ...todo, current: false }

【讨论】：

您现在重新创建所有个待办事项，其中大部分您将不必要地重新创建，这可能导致重新渲染或至少 React 必须重新创建 jsx 并且必须深入比较虚拟 DOM。
我同意这不是最有效的解决方案。

【解决方案2】：

我首先通过循环 map 创建新的待办事项，然后分配给状态

case planConstants.UPGRADE_PLAN_SUCCESS: {
    const newTodos = state.annualPlans.map((todo) => {
        if (todo.value === action.data.plan_id) {
           return { ...todo, current: true }; // if todo.id matched then set the current to true and return;
        }

        if (todo.current) {
            return { ...todo, current: false }; // else if current is already true, then false it and return
        }

        return todo; // else return original todo
   });

    return {
        ...state,
        annualPlans: newTodos
    };
}        
.....

这将优化渲染并防止多次循环。

【讨论】：

【解决方案3】：

无需重新创建 all 待办事项，如果您使用纯组件，那么这将搞砸优化。您可以添加一个地图来处理重置当前值：

const planReducer = (state = initialState, action) => {
  switch (action.type) {
    case planConstants.UPGRADE_PLAN_SUCCESS:
      return {
        ...state,
        annualPlans: state.annualPlans
          .map(
            (todo) =>
              todo.current
                ? { ...todo, current: false } //reset current to false
                : todo // no need to change this one
          )
          .map((todo) =>
            todo.value === action.data.plan_id
              ? // transform the one with a matching id
                { ...todo, current: true }
              : // otherwise return original todo
                todo
          ),
      };
    default:
      return state;
  }
};

【讨论】：