React-Redux: How to change the initial state in Reducer function

Question

I am working on a React application and I am using Redux to store the state. I have the following code:

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 })
    }
}

In the above Reducer, the initial state is an empty array. Dispatching the GET_MENU action, changes the initial state so that it contains an array of menu items instead.

The array that is fetched in the GET_MENU action is of the following:

However I want my initial state to be like the following:

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

In the GET_MENU case in the reducer code, I am not sure what the correct syntax is to use in order to assign the menuArray property in the state to the array that is returned from the GET_MENU action.

Any insights are appreciated.

Answer 1

The state is simply a JavaScript value. If you want it to be an object with two properties, this isn't the right syntax:

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

This is:

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

Your reducer will now need to also return objects. You'll want to return a new object each time. Here's how you can do your reducer, specifically:

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;
    }
}

This says "create an object comprised of all the properties of the previous state but with the menuArray property set to the payload."

Answer 2

    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 3

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;
  }
}