Comment puis-je ajouter un élément à un tableau dans réducteur de Réagir natif redux?

Comment puis-je ajouter des éléments dans mon tableau arr[] de redux de l'état dans le réducteur?
Je suis en train de faire ce-

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

InformationsquelleAutor coderzzz18 | 2016-12-01

256

Deux options différentes pour ajouter un élément à un tableau sans mutation
```
case ADD_ITEM :
    return { 
        ...state,
        arr: [...state.arr, action.newItem]
    }
```
OU
```
case ADD_ITEM :
    return { 
        ...state,
        arr: state.arr.concat(action.newItem)
    }
```
- Qui devrait être considéré comme préférable?
- si vous écrivez du code dans l'ES6 préfère la première qui est plus lisible et élégant de l'OMI.
- Aussi, la première est pure, la seconde ne l'est pas. À partir de la Redux docs: "Il est très important que le réducteur reste pur. Choses que vous ne devriez jamais le faire à l'intérieur d'un réducteur: 1. Muter ses arguments; 2. Effectuer des effets secondaires comme des appels de l'API et de routage des transitions; 3. Appel des fonctions non-pures, par exemple la Date.maintenant() ou les Mathématiques.random()."
InformationsquelleAutor Yadhu Kiran
21

push ne pas retourner un tableau, mais la longueur de celui-ci (docs), de sorte que vous êtes en train de faire est de remplacer le tableau avec sa longueur, de perdre la seule référence à ce que vous avez eu. Essayez ceci:
```
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
     }
}
```
- Quelqu'un peut-il répondre à cette question avec Object.assign pour que les modifications de la matrice à l'intérieur de l'état s'il vous plaît?
- Pourquoi avez-vous besoin Object.assign? Il est utilisé pour les objets, et c'est essentiellement la même chose. Lorsque vous avez arr:[...state.arr, action.newItem] vous pouvez utiliser obj: Object.assign({}, state.obj, action.newItem, à condition que obj et newItem sont des objets. Si vous voulez le faire pour l'ensemble de l'etat, il vous suffit de faire Object.assign({}, state, {arr: [..state.arr, action.newItem]})
- merci j'ai fait: var obj = { isLoading: true, data: ['a', 'b', 'c', 'd'] } var newObj = Object.assign({}, obj, { data: [...obj.data, 'e'] }); et il me donne ceci: { isLoading: true, data: [ 'a', 'b', 'c', 'd', 'e' ] } pour newObj qui est assez bon pour ce que j'en ai besoin. Mais je voulais utiliser l'Objet.attribuer sans la propagation de l'opérateur pour produire le même résultat. Est-ce possible?
- Je suppose que vous pouvez le remplacer par [].concat(obj.data, ['e']), si vous ne voulez pas utiliser l'ES6 fonctionnalités. Objet.attribuer est destiné pour les objets, et même si elle ne vous donnera pas toutes les erreurs de l'utiliser sur un tableau, le résultat n'est pas une concaténation de tableaux. Si vous essayez Object.assign({}, [1, 2, 3], [4]), vous obtenez [4, 2, 3] comme un résultat.
InformationsquelleAutor martinarroyo

Si vous avez besoin d'insérer dans une position spécifique dans le tableau, vous pouvez le faire:

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

InformationsquelleAutor JoeTidee

J'ai un échantillon

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;

ajouter une description

InformationsquelleAutor Long Nguyen Qui

Vous devez vous connecter pour publier un commentaire.