React native redux indirgeyicisinde diziye nasıl bir eleman ekleyebilirim?

140

arr[]Redüktör durumumdaki redüktör dizime nasıl eleman ekleyebilirim ? Bunu yapıyorum-

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
kaynak

363

Mutasyon olmadan bir diziye öğe eklemek için iki farklı seçenek

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

VEYA

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

— Yadhu Kiran
kaynak

1

Hangisi tercih edilmelidir?

— sapht

19

@sapht ES6'da kod yazıyorsanız, daha okunabilir ve zarif IMO olan ilk kodu tercih edin.

— Yadhu Kiran

5

Ayrıca, birincisi saf, ikincisi değil. Redux belgelerinden: "Redüktörün saf kalması çok önemlidir. Asla bir redüktörün içinde yapmamanız gereken şeyler: 1. Argümanlarını değiştirin; 2. API çağrıları ve yönlendirme geçişleri gibi yan etkiler yapın; 3. Saf olmayan fonksiyonları çağırın, örneğin Date.now () veya Math.random (). "

— Büyüleyici Robot

Merhaba, @YadhuKiran bana neden çok iyi anlayamadım dizinin ikinci dizinine yeni değer eklediğimizi açıklayabilir misiniz? arr: [...state.arr, why here?]

— Oliver D

@OliverD, Forma sözdizimi yukarıdaki gibi kullanıldığında, ikinci dizine değil son dizine öğe eklenir . Bunun aksine [action.newItem, ...state.arr], elemanı ilk konuma yerleştirir.

— Yadhu Kiran

22

pushdiziyi değil, dizinin uzunluğunu ( dokümanlar ) döndürür , bu nedenle yaptığınız şey diziyi uzunluğuyla değiştirmek ve sahip olduğunuz tek referansı kaybetmektir. Bunu dene:

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

— martinarroyo
kaynak

1

Object.assignEyalet içindeki dizi değişiklikleri için bu soruya kimse cevap verebilir mi?

— Vennesa

2

Neden ihtiyacın var Object.assign? Nesneler için kullanılır ve aslında aynı şeydir. Eğer varsa nerede arr:[...state.arr, action.newItem]kullanabilirsiniz obj: Object.assign({}, state.obj, action.newItemşartıyla objve newItemnesnelerdir. Bunu tüm devlete yapmak istiyorsanız, bunu yapabilirsinizObject.assign({}, state, {arr: [..state.arr, action.newItem]})

— martinarroyo

1

@martinarroyo, teşekkürler öylesine yaptım:

var obj = {     isLoading: true,     data: ['a', 'b', 'c', 'd'] }  var newObj = Object.assign({}, obj, { data: [...obj.data, 'e'] });

ve bana bunu verir: { isLoading: true, data: [ 'a', 'b', 'c', 'd', 'e' ] }newObj için ihtiyacım olan şey için yeterince iyi. Ama aynı sonucu üretmek için forma operatörü olmadan Object.assign kullanmak istedim. Mümkün mü?

— Mart'ta Vennesa

1

@Vennesa Sanırım [].concat(obj.data, ['e'])ES6 özelliklerini kullanmak istemiyorsanız, onunla değiştirebilirsiniz . Object.assign nesneler içindir ve dizide kullanmanız için herhangi bir hata vermese de sonuç dizilerin birleşimi değildir. Eğer denerseniz Object.assign({}, [1, 2, 3], [4]), [4, 2, 3]sonuç alırsınız .

— martinarroyo

13

Dizideki belirli bir konuma eklemeniz gerekiyorsa, bunu yapabilirsiniz:

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

— JoeTidee
kaynak

Burada tökezledim ... ancak bu cevap yukarıdaki soruya tam olarak uymuyor. Yine de tam da aradığım şey buydu. Bir dizide belirli bir dizine bir nesne eklemek için bir yol arıyordu. Bu yüzden cevabı oyladım. Çok yardımcı oldu ve bana biraz zaman kazandıracak. Teşekkürler!

— omostan

0

Bir örneğim var

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;

— Long Nguyen Qui
kaynak

1

biraz açıklama ekle

— SPatel