Question

我有以下减速器：

const initialState = {
    items: [],
    cartOpen: false,
    total: 0
}

const Cart = (state = initialState, action) => {
    switch (action.type) {
        case 'ADD_TO_CART':
           return [...state.items,action.payload]

        default:
            return state
    }
}

尝试发送这样的动作：

 store.dispatch({type: 'ADD_TO_CART', payload: 22});

如何将作为id的有效负载推送到items数组？

Answer 1

你的reducer返回一个数组而不是一个返回一个对象的对象而不改变状态使用Object.assign或spread operator ... 你的代码应该是这样的。

const initialState = {
    items: [],
    cartOpen: false,
    total: 0
}

const Cart = (state = initialState, action) => {
    switch (action.type) {
        case 'ADD_TO_CART':
           return Object.assign({} , state, {
              items : [...state.items,action.payload]
           })

        default:
            return state
    }
}

如果您的目标浏览器不支持Object.assign，请确保使用pollyfill，或者您可以使用我认为不需要pollyfill的扩展运算符

const initialState = {
  items: [],
  cartOpen: false,
  total: 0
}

const Cart = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_TO_CART':
     return { ...state, {
        items : [...state.items , action.payload]
     })
    default:
      return state
  }
}

Answer 2

您可以使用immutability-helper库来更改您的州。它的一个额外优势是它可以让您轻松地轻松更改您所在州的深层嵌套对象

import update from 'immutability-helper'; 
const initialState = {
    items: [],
    cartOpen: false,
    total: 0
}

const Cart = (state = initialState, action) => {
    switch (action.type) {
        case 'ADD_TO_CART':
           return update(state, {
               items: {
                  $push: action.payload
               }
           })

        default:
            return state
    }
}

Docs

如何在redux存储中向数组添加id？

2 个答案: