如何在 React Native redux 的 reducer 中向数组添加元素？

Question

How do I add elements in my array arr[] of redux state in reducer? I am doing this-

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

Answer 1

Two different options to add item to an array without mutation

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

OR

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

Answer 2

push does not return the array, but the length of it ( docs ), so what you are doing is replacing the array with its length, losing the only reference to it that you had. Try this:

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

Answer 3

If you need to insert into a specific position in the array, you can do this:

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

Answer 4

Since this question gets a lot of exposure:

If you are looking for the answer to this question, there is a good chance that you are following a very outdated Redux tutorial .

The official recommendation (since 2019) is touse the official Redux Toolkit to write modern Redux code .

Among other things, that will eliminate string action constants and generate action creators for you.

It will also employ methods that allow you to just write mutating logic in your Reducers created by createReducer or createSlice , so there is no need to write immutable code in Reducers in modern Redux in the first place.

Please follow the official Redux tutorials instead of third-party tutorials to always get the most up-to-date information on good Redux practices and will also show you how to use Redux Toolkit in different common scenarios.

Answer 5

I have a sample

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;

Answer 6

If you need to add array one after another then you can use

//initial state
const initialState = {
   array: [],
}

...
case ADD_ARRAY :
    return { 
        ...state,
        array: [...state.array, ...action.newArr],
    }
//if array = [1,2,3,4]
//and newArr = [5,6,7]
//then updated array will be -> [1,2,3,4,5,6,7]
...

This Spread syntax (...) iterates array element and store inside the array [ ], what you can simply do with " for loop " or with any loop.