在React Redux中设置状态的更好做法

Question

我正在学习Redux。我有点新，所以我不想在一开始就养成不良习惯，这就是为什么我要写这个。

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

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只是纯函数，它们采用上一个状态和一个动作，然后返回下一个状态。记住要返回新的状态对象，而不是改变先前的状态。

通过将新值分配给state，您明显违反了以下规则：

state = {...state, valueOne: payload }

注意：不要忘记const newState = {...state}，只会创建浅表副本，因此，如果您具有嵌套状态，这也会违反原理。

如果是嵌套状态，请按照以下方式进行更新：

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

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

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

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