Как добавить элемент в массив в редукторе React native redux?

148

Как мне добавить элементы в свой массив arr[]состояния редукции в редукторе? Я делаю это-

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
    }
}
react-native redux react-redux coderzzz18
источник

Ответы:

379

Два разных варианта добавления элемента в массив без изменения

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

ИЛИ

case ADD_ITEM :
    return { 
        ...state,
        arr: state.arr.concat(action.newItem)
    }
Ядху Киран
источник
1
Какой из них следует считать предпочтительным?
sapht
19
@sapht, если вы пишете код на ES6, предпочтите первый, более читаемый и элегантный IMO.
Ядху Киран
5
Кроме того, первое чистое, второе - нет. Из документации Redux: «Очень важно, чтобы редуктор оставался чистым. Вещи, которые вы никогда не должны делать внутри редуктора: 1. Изменяйте его аргументы; 2. Выполняйте побочные эффекты, такие как вызовы API и переходы маршрутизации; 3. Вызов нечистых функций, например Date.now () или Math.random () ".
Очаровательный робот
Привет, @YadhuKiran может мне объяснить, почему мы добавляем новое значение во второй индекс массива, я не очень хорошо это понял? arr: [...state.arr, why here?]
Оливер Д.
@OliverD, когда используется синтаксис распространения, как указано выше, он вставляет элемент не во второй индекс, а в последний индекс. В отличие от этого, [action.newItem, ...state.arr]вставит элемент в первую позицию.
Ядху Киран
23

pushвозвращает не массив, а его длину ( документы ), поэтому вы делаете замену массива его длиной, теряя единственную ссылку на него, которая у вас была. Попробуй это:

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
     }
}
Мартинарройо
источник
1
Кто-нибудь может ответить на этот вопрос с Object.assignпросьбой об изменении массива внутри состояния?
Vennesa
2
Зачем тебе это нужно Object.assign? Он используется для объектов, и по сути это то же самое. Где есть arr:[...state.arr, action.newItem]вы можете использовать obj: Object.assign({}, state.obj, action.newItemпри условии, что objи newItemявляются объектами. Если вы хотите сделать это для всего штата, вы можете просто сделатьObject.assign({}, state, {arr: [..state.arr, action.newItem]})
martinarroyo
1
@martinarroyo, спасибо, я так var obj = { isLoading: true, data: ['a', 'b', 'c', 'd'] } var newObj = Object.assign({}, obj, { data: [...obj.data, 'e'] });и сделал: и это дает мне следующее: { isLoading: true, data: [ 'a', 'b', 'c', 'd', 'e' ] }для newObj, которого достаточно для того, что мне нужно. Но я хотел использовать Object.assign без оператора распространения, чтобы получить тот же результат. Это возможно?
Vennesa
1
@Vennesa Я думаю, вы можете заменить его [].concat(obj.data, ['e']), если не хотите использовать функции ES6. Object.assign предназначен для объектов, и хотя он не даст вам никаких ошибок при его использовании в массиве, результат не является объединением массивов. Если попробуешь Object.assign({}, [1, 2, 3], [4]), получишь [4, 2, 3]в результате.
martinarroyo
14

Если вам нужно вставить в определенную позицию в массиве, вы можете сделать это:

case ADD_ITEM :
    return { 
        ...state,
        arr: [
            ...state.arr.slice(0, action.pos),
            action.newItem,
            ...state.arr.slice(action.pos),
        ],
    }
JoeTidee
источник
1
Я споткнулся здесь ... хотя этот ответ не совсем соответствует поставленному выше вопросу. Тем не менее, это было именно то, что я искал. Я искал способ вставить объект в определенный индекс в массиве. Следовательно, я проголосовал за ответ. Это было очень полезно и сэкономило мне время. Благодарность!
omostan
0

У меня есть образец

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;
Лонг Нгуен Куи
источник
1
добавить описание
SPatel