reactjs - 在 React Redux 中设置状态的更好做法是什么

Question

我正在学习 Redux。我是个新人，所以我不想一开始就养成坏习惯，这就是我写这篇文章的原因。

我正在阅读的文档说，在 reducer 中，我们需要始终设置更改它的状态 - 换句话说，执行以下操作:

const someReducer = (state=initState, {type, payload}) => {
    switch(type) {
        case 'CHANGE_VALUE_ONE' : {
            state = {...state, valueOne: payload }
            break
        }
        case 'CHANGE_VALUE_TWO' : {
            state = {...state, valueTwo: payload }
            break
        }
        default:
            state = state
    }
    return state
}

我的方法是创建一个 newState 常量，它与我们收到的状态相同，对虚拟对象进行更改并返回它 - 或在代码中:

const userReducer = (state= {name: null, age: null}, {type, payload}) => {
    const newState = {...state}
    switch(type) {
        case 'CHANGE_VALUE_ONE' : {
            newState.valueOne= payload
            break
        }

        case 'CHANGE_VALUE_TWO' : {
            newState.valueTwo= payload
            break
        }
    }

    return newState
}

我认为我这样做的方式更干净 - 如果我有一个复杂的状态，我可以轻松地更改我需要更改的内容，而无需改变原始状态。

Answer 1

对于第一个片段，您违反了纯 reducer 的原则。这意味着不要直接更新状态中的值，而是创建它的新副本并在其中进行更改。

根据Doc :

Reducers are just pure functions that take the previous state and an action, and return the next state. Remember to return new state objects, instead of mutating the previous state.

通过为 state 分配新值，您明显违反了这一点，此处:

state = {...state, valueOne: 负载}

<小时/>

注意:不要忘记const newState = {...state}，只会创建 shallow copy ，所以如果你有嵌套状态，这也会违反原则。

如果是嵌套状态，请按以下方式更新:

var obj = { car: { model: '', num: '' } };

function update() {
  return {
    ...obj,
    car: {
      ...obj.car,
      model: 'abc'
    }
  }
}

console.log('new obj = ', update());

console.log('old obj = ', obj);