Состояние этого элемента не определено в первый раз?

Question

Я пытаюсь создать тумблер в моем приложении, и я новичок в редукции. Публикация этого вопроса после очень больших усилий и поиска в Интернете. Пожалуйста, помогите. Мой редуктор ниже:

const initialState = {
    preview: "off",
    cards:
};

const cardReducer = (state = initialState, action) => {
        switch (action.type) {

            case "FIND_ALL_CARDS":
                return {
                    cards: action.cards
                };
            case "DELETE_CARD":
                return {
                    cards: state.cards.filter(card => card.id !== action.cardId)
                };
            case "CREATE_CARD":
                return {
                    cards: [...state.cards, action.card]
                };
            case "PREVIEW":
                console.log(state); // I get cards[] in the state but no preview.
                let swtch = "on";
                if (state.preview === "on") {
                    swtch = "off";
                }
                console.log(state.preview); // Undefined 

                return {
                    cards: state.cards,
                        preview: swtch
                };
            default:
                return state;
        }

Я правильно подключился в своем компоненте

const stateToPropertyMapper = state => ({
  cards: state.cards.cards,
  preview: state.cards.preview
});

В первый раз я получаю неопределенное значение при переключении переключателя, но после первого переключения я получаю состояние. Пожалуйста, помогите мне в этом

Answer 1

В основном из редуктора вы возвращаете КОПИЮ своего состояния, а когда вы возвращаете {cards: []}, вы теряете все остальные реквизиты из состояния. Когда вы изменяете состояние в FIND_ALL, DELETE и Create CARD, вам также необходимо вернуть оставшуюся часть состояния. Отредактируйте вот так

case "FIND_ALL_CARDS":
    return {
        ...state
        cards: action.cards
     };

Делайте это во всех действиях, не забывайте пропускать предыдущую опору состояния, когда вы изменяете один