javascript - 如何在不使用扩展运算符的情况下更改 Redux 状态的子切片

Question

我需要更新我的状态的一个切片，而不更新整个切片；仅子切片。我见过其他人结合 reducer 来实现这一点，但我还没有弄清楚如何在我的项目中做到这一点。 Redux.js.org 将其显示为另一种实现方式:

function updateVeryNestedField(state, action) {
    return {
        ....state,
        first : {
            ...state.first,
            second : {
                ...state.first.second,
                [action.someId] : {
                    ...state.first.second[action.someId],
                    fourth : action.someValue
                }
            }
        }
    }
}

不幸的是，我的项目是用 JavaScript 编写的。我如何在没有扩展运算符的情况下使用普通的 javascript 复制它？我已经尝试使用 Object.assign 进行一些变体，但无法使其正常工作。

Answer 1

正如您所提到的，您可以使用 Object.assign 代替 spread:

{...state, x: 1}

应该给你相同的结果

Object.assign({}, state, {x: 1})

请注意，空对象是 Object.assign 的第一个参数。其作用是将 state 中的值复制到一个新的空对象中，然后将 {first: 1} 中的值复制到新对象中。

例如:

var a = { x: 1, y: 2}
var b = {...a, y: 3 }
console.log(a); // { x: 1, y: 2 }
console.log(b); // { x: 1, y: 3 }

相当于

var c = { x: 1, y: 2 }
var d = Object.assign({}, a, { y: 3 });
console.log(c); // { x: 1, y: 2 }
console.log(d); // { x: 1, y: 3 }

重要的是，a 和 c 都没有改变。 b 和 d 为 y 提供了新值。

对于嵌套对象，您可以重复此过程:

function updateVeryNestedField(state, action) {
    return Object.assign({}, state, {
        first : Object.assign({}, state.first, {
            second : Object.assign({}, state.first.second, {
                [action.someId] : Object.assign({},
                    state.first.second[action.someId],
                    { fourth : action.someValue }
                )
            })
        })
    });
}

var oldState = { first: { second: { 'anId': { fourth: 3 } } } };
var newState = updateVeryNestedField(oldState, { someId: 'anId', someValue: 5 });
console.log(oldState.first.second.anId.fourth); // 3
console.log(newState.first.second.anId.fourth); // 5

但是，要获得完整的 ES2015 支持，您也无法 use computed keys 。因此，您应该在 return 语句之前构建一些对象。例如:

function updateVeryNestedField(state, action) {
    // Create a temporary object to avoid use of computed keys
    var updatedSecond = Object.assign({}, state.first.second);
    updatedSecond[action.someId] = Object.assign({}, state.first.second[action.someId], {
        fourth: action.someValue
    });
    return Object.assign({}, state, {
        first : Object.assign({}, state.first, { second : updatedSecond })
    });
}

var oldState = { first: { second: { 'anId': { fourth: 3 } } } };
var newState = updateVeryNestedField(oldState, { someId: 'anId', someValue: 5 });
console.log(oldState.first.second.anId.fourth); // 3
console.log(newState.first.second.anId.fourth); // 5