React-Redux：如何在 Reducer 函数中更改初始状态答案

【问题标题】：React-Redux: How to change the initial state in Reducer functionReact-Redux：如何在 Reducer 函数中更改初始状态
【发布时间】：2020-04-23 02:47:41
【问题描述】：

我正在开发一个 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 })
    }
}

在上面的Reducer中，初始状态是一个空数组。调度 GET_MENU 操作会更改初始状态，使其包含菜单项数组。

GET_MENU 操作中获取的数组如下：

但是我希望我的初始状态如下所示：

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

在 reducer 代码中的 GET_MENU 案例中，我不确定使用什么正确的语法来将状态中的 menuArray 属性分配给从 GET_MENU 操作返回的数组。

感谢任何见解。

【问题讨论】：

标签： javascript reactjs redux

【解决方案1】：

状态只是一个 JavaScript 值。如果您希望它是一个具有两个属性的对象，那么这不是正确的语法：

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

这是：

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

你的 reducer 现在还需要返回对象。您将希望每次都返回一个 new 对象。以下是你如何做你的减速器，特别是：

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 属性设置为有效负载的对象。”

【讨论】：

【解决方案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;
    }
}

【讨论】：

【解决方案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;
  }
}

【讨论】：