减速器未返回更新状态

Question

I can't get my reducer to return updated state.

The action (confirmed with debugger) is an array of objects - something like: [{name: "test"}, {name: "second_test"}]

I think something must be wrong with my spread operator, although I've also tried Object.assign() in the debugger and that seems to return the expected result.

My components is apparently just getting the default state. Here's my reducer code. Any help would be appreciated. Thank you!

const initialState = {
    current: {},
    all: []
}

export default function deckReducer(state = initialState, action) {
    switch(action.type) {
        case 'CREATE_DECK':
            return {...state, all: [...state.all, action.payload]}

        case 'FETCH_DECKS':

            debugger;
            return {...state, all: action.payload}

        default: return state
    }
}

Answer 1

I had this very issue recently (exactly as you describe), and I resolved the problem by using the immutability-helper package which is listed here on the ReactJS docs .

This approach allows you to delegate the heavy lifting of state immutability and nested state updates. You should find this resolves your issue:

import update from 'immutability-helper';

const initialState = {
    current: {},
    all: []
}

export default function deckReducer(state = initialState, action) {

    switch(action.type) {

        case 'CREATE_DECK': {
            /* Add payload to nested state.all list */
            return update(state, { all : { $push : [action.payload] }});
        }

        case 'FETCH_DECKS': {    
            /* Replace state.all with incoming payload */
            return update(state, { all : { $set : action.payload }});
        }

        default: return state
    }
}