Question

我有一个这样的reducer文件：

const initialState = {
  name: '',
  address: { street: '', city: '', country: '' },
  phone: {cell: '', home: ''},
  contacts: {family: [], friends: []}
};

const reducer = (state=initialState, action) => {
  switch(action.type) {
    case 'SET_NAME':
      return {...state, address: {...state.address}, phone: {...state.phone}, contacts: contacts: {family: [...obj.contacts.family], friends: [...obj.contacts.friends]}};
  }
}

您可以想象，在每一个单独的开关情况下，我都会克隆嵌套对象，从而使代码难以阅读。有什么办法解决这个问题？

Answer 1

“传播” ...语法将包含您正在扩展的对象的浅表副本。通常这已经足够了，尤其是在Redux中，在创建状态对象后，您不应该对其进行突变。所以您的reducer函数可以是

const reducer = (state=initialState, action) => {
  switch(action.type) {
    case 'SET_NAME':
      return { ...state, name: action.payload };
    default:
      return state;
  }
}

反过来等同于

case 'SET_NAME':
  return {
    // name: state.name,
    address: state.address,
    phone: state.phone,
    contacts: state.contacts,
    name: action.payload
  };

旧状态和新状态将共享嵌套的对象（您不会获得深层副本），但这没关系。

（如果您的对象足够“健康”，还可以考虑使用Redux的reducer composition，它可以为每个子字段编写一个单独的reducer并将它们组合在一起。）

Answer 2

我同意@David Maze。尽管通常使用跨页就可以了，但它变得过于复杂，难以阅读且更容易出错。我已经在工作中遇到了这个问题。

我强烈建议将状态拆分为较小的化简函数，每个函数都应注意当前状态的支持。您将避免嵌套对象，并使代码看起来更简洁。

我们如何组织Redux返回还原的嵌套嵌套状态的reducer函数？

2 个答案: