ฉันจะเพิ่มองค์ประกอบลงในอาร์เรย์ในตัวลดรีแอคทีลักซ์รีแอกทีฟได้อย่างไร

ฉันจะเพิ่มองค์ประกอบใน array arr[]ของ redux state ใน reducer ได้อย่างไร ฉันกำลังทำสิ่งนี้ -

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

สองตัวเลือกที่แตกต่างกันเพื่อเพิ่มรายการในอาร์เรย์โดยไม่มีการกลายพันธุ์

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

หรือ

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

pushไม่ส่งคืนอาร์เรย์ แต่ความยาวของมัน ( docs ) ดังนั้นสิ่งที่คุณกำลังทำคือการแทนที่อาร์เรย์ด้วยความยาวของมันสูญเสียการอ้างอิงเดียวกับที่คุณมี ลองสิ่งนี้:

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

หากคุณต้องการแทรกลงในตำแหน่งเฉพาะในอาเรย์คุณสามารถทำได้:

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

ฉันมีตัวอย่าง

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;