React Redux réducteur écrase les valeurs LOAD_SUCCESS?

Question

J'ai un profilesReducer que je veux utiliser pour stocker 1 ou plusieurs profils utilisateur dans mon magasin redux. À titre d'exemple, pensez à Twitter, qui doit stocker mon profil ainsi que d'autres profils.

Voici mes profilesReducer.js:

import * as types from '../actions/actionTypes'; 

const initialState = [] 

export default function profilesReducer(state = initialState, action) { 
    switch (action.type) { 
    case types.LOAD_PROFILE_SUCCESS: 
     return [Object.assign({}, action.profile)] 
    case types.UPDATE_PROFILE_SUCCESS: 
     return [ 
     ...state.filter(profile => profile.id !== action.profile.id), 
     Object.assign({}, action.profile) 
     ] 
    default: 
     return state; 
    } 
} 

Le problème est LOAD reçoit plus d'un profil (distingué par profile.id) mais le profil existant écrasant dans le magasin au lieu d'ajouter/mise à jour.

J'ai besoin de LOAD_PROFILE pour autoriser plus de 1 profil d'utilisateur dans le magasin. Aucune suggestion? Merci

Answer 1

Jolie que votre code doit changer à cela.

import * as types from '../actions/actionTypes'; 

const initialState = [] 

export default function profilesReducer(state = initialState, action) { 
    switch (action.type) { 
    case types.LOAD_PROFILE_SUCCESS: 
     return [...Object.assign({}, action.profile)] 
    case types.UPDATE_PROFILE_SUCCESS: 
     return [ 
     ...state.filter(profile => profile.id !== action.profile.id), 
     Object.assign({}, action.profile) 
     ] 
    default: 
     return state; 
    } 
} 

La façon dont vous l'aviez, vous avez été tout simplement renvoyer un tableau contenant un élément dans ce action.profile, mais vous devez ajouter votre article dans le tableau qui a déjà les autres éléments. Vous ne pouvez pas non plus simplement pousser car cela ferait muter le tableau. Cette ligne est tout ce que vous devez changer.

return [Object.assign({}, action.profile)] -t-rajoutez pas

return [...Object.assign({}, action.profile)] n'ajoute et ne mute pas.

Answer 2

Modifier

J'ai changé ma solution, il comprend un moyen de mettre à jour un tableau.

Voici un CodeSandbox à tester: https://codesandbox.io/s/zk9r6k1z4p

import * as types from '../actions/actionTypes'; 

const initialState = [] 

export default function profilesReducer(state = initialState, action) { 
    switch (action.type) { 
    case types.LOAD_PROFILE_SUCCESS: 
     return [...state, action.profile] 
    case types.UPDATE_PROFILE_SUCCESS: 
     return state.map((profile) => { 
     if(profile.id !== action.profile.id) { 
      return profile; 
     } 

     return { 
      ...profile, 
      ...action.profile 
     };  
    }); 
    default: 
     return state; 
    } 
} 

Answer 3

propagation état actuel et juste ajouter le nouveau profil à la fin:

case types.LOAD_PROFILE_SUCCESS: 
    return [...state, action.profile] 

Object.assing({}, action.profile) est inutile, puisque tout ce qu'elle fait ici est la copie action.profile dans un nouvel objet vide {} et retourne.

Answer 4

Vous pouvez obtenir ce que vous voulez soit en utilisant Object.assign ou la syntaxe spread operator, vous ne devez pas utiliser les deux

Avec Object.assign,

case types.LOAD_PROFILE_SUCCESS: 
    return Object.assign([], state, action.profile) 

Avec Spread operator syntax

case types.LOAD_PROFILE_SUCCESS: 
    return [...state, action.profile] 

Cependant docs React vous conseille d'utiliser la syntaxe Réparties sur Object.assign, Voir ce post:

Using Object.assign in React/Redux is a Good Practice?