javascript - 如何在 React 中更新特定的 redux 状态片段

Question

我在使用 redux 和 react-redux 更新状态时似乎遇到了障碍。当我更新单个状态切片时，所有其他状态都会被删除。我知道这个问题的答案很简单，但我无法弄清楚，也没有在网上找到任何其他内容。

为了澄清，这是我的 reducer :

const initialState = {
        selectedLevel: null,
        selectedVenue: null,
        selectedUnitNumber: null,
        selectedUnitName: null,
        selectedYear: null
}

export default (state = initialState, action) => {
    console.log('reducer: ', action);
    switch (action.type){
        case 'CHOOSE_LEVEL':
            return action.payload;
        case 'CHOOSE_VENUE':
            return action.payload;
        case 'CHOOSE_UNIT':
            return action.payload;
        case 'SHOW_COURSES':
            return action.payload;
    }

    return state;
}

还有我的联合收割机 reducer :

export default combineReducers({
    workshopSelection: WorkshopSelectReducer
});

所以我的初始状态如下所示:

workshopSelection: {
    selectedLevel: null,
    selectedVenue: null,
    selectedUnitNumber: null,
    selectedUnitName: null,
    selectedYear: null
}

但是当我使用我的 Action 创建器之一时，例如:

export function chooseVenue(venue){
    return {
        type: 'CHOOSE_VENUE',
        payload: {
            selectedVenue: venue
        }
    }
}

我最终的状态如下:

workshopSelection: {
    selectedVenue: 'London',
}

该对象内不受此 Action 创建者影响的所有其余状态已被完全清除。相反，我只希望所有其他条目保持其原始值 - 在本例中为 null，或者已分配给它们的任何其他值。

希望一切都有意义。

干杯!

Answer 1

您基本上是用另一个对象(您的有效负载，也是一个对象)替换一个对象(之前的状态)。

就标准 JS 而言，这相当于您的 reducer 所做的事情:

var action = {
    type: 'CHOOSE_VENUE',
    payload: {
        selectedVenue: venue
    }
};

var state = action.payload;

解决此问题的最简单方法是使用 Object spread properties :

export default (state = initialState, action) => {
    switch (action.type){
        case 'CHOOSE_LEVEL':
        case 'CHOOSE_VENUE':
        case 'CHOOSE_UNIT':
        case 'SHOW_COURSES':
            // Watch out, fall-through used here
            return {
                ...state,

                ...action.payload
            };
    }

    return state;
}

...但由于这仍处于实验阶段，您必须使用其他方法来克隆以前的属性，然后覆盖新的属性。双 for ... in 循环可能是一个简单的循环:

export default (state = initialState, action) => {
    switch (action.type){
        case 'CHOOSE_LEVEL':
        case 'CHOOSE_VENUE':
        case 'CHOOSE_UNIT':
        case 'SHOW_COURSES':
            // Watch out, fall-through used here
            const newState = {};

            // Note: No key-checks in this example
            for (let key in state) {
                newState[key] = state[key];
            }
            for (let key in action.payload) {
                newState[key] = action.payload[key];
            }

            return newState;
    }

    return state;
}