React-Redux: назначение измененного массива свойству в состоянии

Question

Я работаю над приложением React и использую Redux для хранения состояния. У меня есть следующий код:

menu.actions. js:

import { apiUrl, apiConfig } from '../../util/api';
import { ADD_CATEGORY, GET_MENU } from './menu.types';

export const getMenu = () => async dispatch => {
    const response = await fetch(`${apiUrl}/menu`);
    if (response.ok) {
        const menuData = await response.json();
        dispatch({ type: GET_MENU, payload: menuData })
    }
}

export const addCategory = category => async dispatch => {
    const options = {
        ...apiConfig(),
        method: 'POST',
        body: JSON.stringify(category)
    };
    const response = await fetch(apiUrl + '/category/', options)
    let data = await response.json()
    if (response.ok) {
        dispatch({ type: ADD_CATEGORY, payload: { ...data } })
    } else {
        alert(data.error)
    }
}

menu.reducer. js:

import { ADD_CATEGORY, GET_MENU } from './menu.types';

const INITIAL_STATE = []

export default (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case GET_MENU:
            return [...action.payload];
        case ADD_CATEGORY:
            return [ ...state, { ...action.payload, menuItem: [] } ]
        default:
            return state;
    }
}

В приведенном выше Редуктор, исходное состояние - пустой массив. Отправляя действие GET_MENU, изменяет исходное состояние так, чтобы вместо него он содержал массив элементов меню.

Массив, выбранный в действии GET_MENU, имеет следующий вид:

Я изменил код в функции редуктора так, чтобы начальное состояние теперь было следующим:

menu.reducernew. js:

import { ADD_CATEGORY, GET_MENU } from './menu.types';

    const INITIAL_STATE = {
        menuArray: [],
        isSending: false
    };

    export default (state = INITIAL_STATE, action) => {
        switch (action.type) {
            case GET_MENU:
                return {
                ...state,
                menuArray: action.payload
            };
            case ADD_CATEGORY:
                return {
                ...state,
                menuArray: [ ...menuArray, { ...action.payload, menuItem: [] } ]
            };

            default:
                return state;
        }
    }

Для случая ADD_CATEGORY в Reducer я не уверен, каков правильный синтаксис для переназначения свойства menuArray в состоянии измененному массиву. Я хочу, чтобы в массиве был добавлен новый объект, извлеченный из создателя действия addCategory.

Когда я запускаю свое приложение, я получаю следующую ошибку:

Я не уверен, почему я получаю эту ошибку или как решить это. Любые идеи приветствуются.

Answer 1

Здесь menuArray: [ ...menuArray, { ...action.payload, menuItem: [] } не определена переменная menuArray, которую вы пытаетесь распространить. Используйте state.menuArray для доступа к текущему menuArray.

Изменение:

menuArray: [ ...menuArray, { ...action.payload, menuItem: [] }

Кому:

menuArray: [ ...state.menuArray, { ...action.payload, menuItem: [] }

case ADD_CATEGORY:
     return {
          ...state,
        menuArray: [ ...state.menuArray, { ...action.payload, menuItem: [] } ]
};