时间戳

首页 > 解决方案 > 在 react redux 中设置状态是更好的做法

reactjs - 在 react redux 中设置状态是更好的做法

问题描述

我正在学习 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
}

我认为我这样做的方式更简洁——如果我有一个复杂的状态，我可以很容易地改变我需要改变的东西，而不会改变原始状态。

标签： reactjsreduxreact-redux

解决方案

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

根据文档：

Reducers 只是纯粹的函数，它接受前一个状态和一个动作，然后返回下一个状态。记住要返回新的状态对象，而不是改变以前的状态。

您在这里为 分配新值显然违反了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);

推荐阅读