كيف أضيف عنصرًا إلى قائمة في redux reducer؟

هناك خياران مختلفان لإضافة عنصر إلى قائمة بدون تغيير ال state الأصلي:

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

أو

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

بما أن توابع redux يجب أن تكون pure أي لا يجوز التعديل على state object يدوياً بل إرجاع object جديد مختلف عن السابق إن أردنا التعديل، وفق هذا المبدأ فإن هذا السطر:

arr: state.arr.push([action.newItem])

خاطئ ﻷنه يعدل على المصفوفة بشكل مباشر، الحل هو التالي:

arr: [...state.arr,action.newItem]

السطر السابق يستعمل ميزة array rest حيث تنتج مصفوفة جديدة فيها كل عناصر state.arr ومضافاً إليها action.newItem، يمكن استخدام ميزة array rest لدمج مصفوفتين أيضاً بالشكل اﻵتي:

arr: [...state.arr,...action.newItems]

ويمكن إضافة عنصر في بداية المصفوفة بدلاً من نهايتها هكذا:

arr: [action.newItem,...state.arr]

بالمناسبة أنا أنصحك أن تتعلم redux-toolkit وتستخدمها في جميع مشاريع redux وهذا ما ينصح به فريق مطوري redux، لماذا؟ ﻷن مثالك بعد redux-toolkit يمكن استبداله بالكود التالي:

import {createSlice} from "@reduxjs/toolkit";

const slice = createSlice({
  name: "items",
  initialState: [],
  reducers: {
    addItem(state,action){
      state.arr.push(action.payload);
    }
  }
});
const {actions,reducer} = slice;
const {addItem} = actions;
export default reducer;
export addItem;
// addItem is an action creator so we dispatch it like this
dispatch(addItem(newItem));

لاحظ أننا استعملنا state.arr.push وهذا صحيح ﻷن redux-toolkit تستعمل مكتبة اسمها immer التي تعمل بالطريقة التالية: الـstate الممرر في addItem method هو draft State object مختلف عن state object المخزن داخل redux ، كل تعديل على هذا draft object تلتقطه مكتبة immer المستعملة من قبل redux-toolkit، عند اﻻنتهاء من التعديلات ترجع مكتبة immer كائن object جديد مختلف عن state object القديم وفيه التعديلات المطلوبة.

يمكنك قراءة المزيد عن redux-toolkit هنا

ويمكنك قراءة المزيد عن مكتبة immer وفهمها أكثر هنا