Làm cách nào để thêm một phần tử vào mảng trong bộ giảm tốc của redux gốc React?

Làm cách nào để thêm các phần tử trong mảng arr[]trạng thái redux của tôi vào bộ giảm tốc? Tôi đang làm việc này-

import {ADD_ITEM} from '../Actions/UserActions'
const initialUserState = {
    arr:[]
}

export default function userState(state = initialUserState, action)
{
    console.log(arr);
    switch (action.type)
    {
        case ADD_ITEM: 
            return { 
                      ...state,
                      arr: state.arr.push([action.newItem])
                   }

        default:
            return state
    }
}

Hai tùy chọn khác nhau để thêm mục vào một mảng mà không bị đột biến

case ADD_ITEM :
    return { 
        ...state,
        arr: [...state.arr, action.newItem]
    }

HOẶC LÀ

case ADD_ITEM :
    return { 
        ...state,
        arr: state.arr.concat(action.newItem)
    }

pushkhông trả về mảng, nhưng độ dài của nó ( docs ), vì vậy những gì bạn đang làm là thay thế mảng bằng độ dài của nó, làm mất tham chiếu duy nhất đến nó mà bạn có. Thử cái này:

import {ADD_ITEM} from '../Actions/UserActions'
const initialUserState = {

    arr:[]
}

export default function userState(state = initialUserState, action){
     console.log(arr);
     switch (action.type){
        case ADD_ITEM :
          return { 
             ...state,
             arr:[...state.arr, action.newItem]
        }

        default:return state
     }
}

Nếu bạn cần chèn vào một vị trí cụ thể trong mảng, bạn có thể làm điều này:

case ADD_ITEM :
    return { 
        ...state,
        arr: [
            ...state.arr.slice(0, action.pos),
            action.newItem,
            ...state.arr.slice(action.pos),
        ],
    }

Tôi có một mẫu

import * as types from '../../helpers/ActionTypes';

var initialState = {
  changedValues: {}
};
const quickEdit = (state = initialState, action) => {

  switch (action.type) {

    case types.PRODUCT_QUICKEDIT:
      {
        const item = action.item;
        const changedValues = {
          ...state.changedValues,
          [item.id]: item,
        };

        return {
          ...state,
          loading: true,
          changedValues: changedValues,
        };
      }
    default:
      {
        return state;
      }
  }
};

export default quickEdit;