反应 redux，数组 state 未更新

Question

I have a very simple reducer, as seen below. When I call generateDeck(), I can see the GENERATE_DECK_COMPLETE action being picked up by the reducer in the react dev tools, but the shuffledDeck Array never gets updated in the state.

I'm sure it's something small and silly but I can't see what.

import { suits } from '../common/suits';
import { displayNames } from '../common/displayNames';
import { valueMap } from '../common/valueMap';

/**
 * Actions
 */
export const GENERATE_DECK_COMPLETE = 'deck/GENERATE_DECK_COMPLETE';

export const SELECT_CARD = 'deck/SELECT_CARD';
export const DESELECT_CARD = 'deck/DESELECT_CARD';
export const EMPTY_ACTION = 'deck/EMPTY_ACTION';

/**
 * Initial State
 */
const initialState = {
    shuffledDeck: [],
    selectedCards: []
};

/**
 * Reducer function
 * @param {*} state 
 * @param {*} action 
 */
export default function reducer(state = initialState, action = {}) {
    const { type, payload } = action;

    switch(type) {
        case GENERATE_DECK_COMPLETE:
            return {
                ...state,
                shuffledDeck: [...payload.shuffledDeck]
            };

        case SELECT_CARD:
            return {
                ...state,
                selectedCards: state.selectedCards.push(payload)                
            };
        case DESELECT_CARD:
            return {
                ...state,
                selectedCards: payload.filteredCards
            };

        default:
            return state;
    }
}

/**
 * Create a 52 card deck
 */
export const generateDeck = () => (dispatch) => {
    const deck = [];

    for (const suit of suits) {
        for (const displayName of displayNames) {
            deck.push(createCard(suit, displayName));
        }
    }

    const shuffledDeck = deck.sort(() => Math.random() - 0.5);

    dispatch({
        type: GENERATE_DECK_COMPLETE,
        payload: {
            shuffledDeck
        }
    });
}

Answer 1

shuffledDeck array state push like

case GENERATE_DECK_COMPLETE:
     return {
         ...state,
         shuffledDeck: [...state.shuffledDeck,...payload.shuffledDeck]
     };

switch(type) {
        case GENERATE_DECK_COMPLETE:
            return {
                ...state,
                shuffledDeck: [...state.shuffledDeck,...payload.shuffledDeck]
            };

        case SELECT_CARD:
            return {
                ...state,
                selectedCards: state.selectedCards.push(payload)                
            };
        case DESELECT_CARD:
            return {
                ...state,
                selectedCards: payload.filteredCards
            };

        default:
            return state;
}