通过还原器在子对象的子对象中添加项到数组

Question

如果我的术语不正确，我很抱歉。我对反应和反应非常陌生(几天)。

我试图克服的挑战是在store.order.cart.items中添加一个项。我的商店结构是这样的：

{
    order:
        cart:
            items: [
                {name: "product a"},
                {name: "product b"}
            ]
}

我的减速器如下：

import ApplicationState from '../application-state';
import { ADD_PRODUCT } from "../constants/action-types";

const initialState = ApplicationState;

const rootReducer = (state = initialState, action) => {

  switch (action.type) {
    case ADD_PRODUCT:
        return {
            ...state, order: {
                ...state.order, cart: {
                    ...state.cart, items: [
                        ...state.items, action.payload
                    ]
                }
            }
        };
    default:
      return state;
  }
};

export default rootReducer;

我对ADD_PRODUCT的操作如下：

import { ADD_PRODUCT } from "../constants/action-types"

export const addProduct = product => ({ type: ADD_PRODUCT, payload: product });

和我的动作类型常量(常量/动作-类型)：

export const ADD_PRODUCT = "ADD_PRODUCT";

当我分派我的addProduct操作时(通过浏览器控制台：store.dispatch( addProduct({ name: "product c" }) )对此进行测试)

我得到以下错误：

app.js:36995 Uncaught TypeError: Cannot convert undefined or null to object
    at Function.from (/native)
    at _toConsumableArray (app.js:36995)
    at rootReducer (app.js:37009)
    at Object.dispatch (app.js:13839)
    at <anonymous>:1:7

我做错了什么？将新项添加到order.cart.items数组的正确方法是什么？

Answer 1

items: [
  ...state.items, action.payload
]

在上面的节选中，您尝试将...state.items扩展到items数组中，但是items实际上位于state.order.cart.items；

同样：

cart: {
  ...state.cart, 
}

cart实际上在state.order.cart

这种深层次嵌套的情况就是为什么最好在可能的情况下将状态扁平化并使用combineReducers()。或者，您可以查看不变性助手，以帮助永久设置深度嵌套状态。