React-Redux: Как изменить начальное состояние в функции Reducer

Question

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

menu.reducer. js:

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

const INITIAL_STATE = []

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

menu.actions. js:

import { apiUrl, apiConfig } from '../../util/api';
import { 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 })
    }
}

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

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

Однако я хочу, чтобы мое начальное состояние было следующим:

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

В случае GET_MENU в коде редуктора я не являюсь убедитесь, что правильный синтаксис используется для назначения свойства menuArray в состоянии массиву, который возвращается из действия GET_MENU.

Любые идеи приветствуются.

Answer 1

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

const initialState= {
menuArray: [],
isSending: false
}

export default (state = initialState, action) => {
    switch (action.type) {
        case GET_MENU:
            return {...state, menuArray: action.payload};
        default:
            return state;
    }
}

Answer 2

import { 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
      };
    default:
      return state;
  }
}

Answer 3

Состояние - просто значение JavaScript. Если вы хотите, чтобы это был объект с двумя свойствами, это неправильный синтаксис:

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

Это:

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

Теперь вашему редуктору потребуется также возвращать объекты , Вам захочется каждый раз возвращать новый объект. Вот как вы можете сделать свой редуктор, а именно:

import { 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] };
        default:
            return state;
    }
}

Это говорит: «создайте объект, состоящий из всех свойств предыдущего состояния, но со свойством menuArray, установленным в полезную нагрузку».