如何在React中更新redux状态的特定切片

Question

在使用redux和react-redux更新状态时，我似乎遇到了一个障碍。当我更新单个状态片时，所有其他状态片都会被删除。我知道这个问题的答案很简单，但是我想不出来，也没有在网上找到任何其他的东西。

为了澄清，这是我的减速器:

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;
}

和我的联合减速机:

export default combineReducers({
    workshopSelection: WorkshopSelectReducer
});

我的初始状态是这样的

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

但是当我使用动作创建器时，例如:

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

最后的状态是这样的:

workshopSelection: {
    selectedVenue: 'London',
}

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

希望这一切都有意义。

干杯!

Answer 1

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

在标准JS中，这将相当于你的减速器所做的:

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

解决这个问题最简单的方法是使用对象扩展属性:

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;
}

Answer 2

让您的有效负载对象与操作创建者保持一致，如下所示…

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

和修改你的reducer如下(给出的例子是更新场地，对其他情况也做同样的…)

export default (state = initialState, action) => {
    let newState = Object.assign({}, state); // Take copy of the old state
    switch (action.type){
        case 'CHOOSE_LEVEL':
        case 'CHOOSE_VENUE':
               newState.selectedVenue = action.selectedVenue; // mutate the newState with payload
               break;
        case 'CHOOSE_UNIT':
        case 'SHOW_COURSES':
        default :
           return newState;   
    }
    return newState; // Returns the newState;
}