在使用 Redux 的 reducer 中替换整个状态

IT技术 javascript reactjs redux
2021-05-17 07:12:28

标题听起来很连贯,但是如果我从服务器和减速器中收集数据会发生什么,我只想返回这些数据并将它们设置为新状态。

例如从后端获取数据。如果我想像这样替换它,我真的需要复制以前的状态吗:

export function accountData(state = [], action) {
  switch (action.type) {
    case FETCH_FAILURE:
      console.error('SOMETHING BAD JUST HAPPENED');
      break;
    case FETCH_SUCCESS:
        return Object.assign([], state, action.accountData);
    default:
      return state;
  }
}

或者在这种情况下可以这样做:

export function accountData(state = [], action) {
      switch (action.type) {
        case FETCH_FAILURE:
          console.error('SOMETHING BAD JUST HAPPENED');
          break;
        case FETCH_SUCCESS:
            return action.accountData;
        default:
          return state;
      }
    }
1个回答

是的,您可以替换整个状态。*Object.assign只是一种方便的方法,可以替换部分状态,同时保留其他所有内容,并且以不可变的方式进行。如果您要替换整个状态,则没有必要使用Object.assign.

(*当我说 state 时,我指的是 reducer 负责的 state 部分。)

此外,Object.assign用于数组是没有意义的。Object.assign([], state, action.accountData);在语义上等同于Object.assign([], action.accountData);也就是说,它创建了数组的新副本。但是因为它是一个数组而不是一个对象,一种更明确和直观的写法是action.accountData.slice(0)or [...action.accountData][更正:事实上,Object.assign对数组进行索引替换,这几乎肯定不是您想要的。]

只要您将数组视为只读,您就可以自行返回数组而无需复制它。所以你写的最后一种方式 - return action.accountData;- 是完全正确的。

最后,我必须对这个FETCH_FAILURE案子提出异议。您不会为此操作返回任何内容。但是你的减速器应该总是返回一些东西而不是break;您应该拥有return state;return [];取决于您想要如何处理失败案例。