Comment ajouter un élément au tableau dans le réducteur de React native redux ?

Question

Comment ajouter des éléments dans mon tableau arr[] de l'état redux dans le reducer ? Je fais 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.push([action.newItem])
                   }

        default:
            return state
    }
}

Answer 1

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

Answer 2

push ne retourne pas le tableau, mais la longueur de celui-ci ( docs ), donc ce que vous faites, c'est remplacer le tableau par sa longueur, en perdant la seule référence à celui-ci que vous aviez. 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
     }
}

Answer 3

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),
        ],
    }

Answer 4

Puisque cette question reçoit beaucoup d'attention :

Si vous cherchez la réponse à cette question, il y a de fortes chances que vous suivez un tutoriel Redux très obsolète .

La recommandation officielle (depuis 2019) est la suivante utiliser la boîte à outils officielle de Redux pour écrire du code Redux moderne .

Cela permettra, entre autres, d'éliminer les constantes d'action de type chaîne et de générer des créateurs d'action pour vous.

Il emploiera également des méthodes qui vous permettront d'écrire simplement une logique de mutation dans vos Réducteurs créés par createReducer ou createSlice donc il n'est pas nécessaire d'écrire du code immuable dans les réducteurs dans le Redux moderne en premier lieu.

Veuillez suivre le tutoriels officiels sur Redux au lieu de tutoriels de tiers pour obtenir toujours les informations les plus récentes sur les bonnes pratiques de Redux. Il vous montrera également comment utiliser Redux Toolkit dans différents scénarios courants.

Answer 5

Si vous avez besoin d'ajouter des tableaux l'un après l'autre, vous pouvez utiliser

//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]
...

Cette syntaxe Spread (...) itère les éléments du tableau et les stocke dans le tableau [ ], ce que vous pouvez simplement faire avec " pour boucle " ou avec n'importe quelle boucle.