2017-10-19 5 views
0

Je reçois un tableau d'objets d'une API et le stocke dans un accessoire articleData via Redux. L'accessoire est stocké comme ceci:Ajouter un tableau à un tableau sans nom dans le réducteur Redux

articleData Prop

Dans mon réducteur Je veux préfixer à ce tableau avec un autre objet articleData. L'objet que je veux préfixer est stocké dans action.articleData mais je ne peux pas trouver un moyen de préfixer ce tableau sans le nommer. Voici mon code réducteur:

export function articleData(state = {}, action) { 
    switch (action.type) { 
     case 'ARTICLE_FETCH_DATA_SUCCESS': 
      return action.articleData; 

     //HERE IS THE PROBLEM! 
     case 'ARTICLE_POST_NEW_ARTICLE_SUCCESS': 
      return {arr:[action.articleData, ...state]} 

     default: 
      return state; 
    } 
}

Il ajoute le nouvel objet avec succès. Problème: lorsque j'exécute ce code, il change l'état d'un tableau d'objets en un tableau nommé "arr". Voir image:

enter image description here

Je ne peux pas comprendre comment ajouter simplement au tableau d'objets sans le nommer quelque chose. Si je supprime le arr: du code réducteur, il en résulte une erreur de syntaxe.

Merci d'avance à toute personne désireuse de m'aider! :)

+0

Est-ce que 'state.articleData' n'existe pas? 'return {... state, articleData: [action.articleData, ... state.articleData]}' –

Répondre

1

L'état du réducteur articleData est un tableau. Dans le gestionnaire d'actions ARTICLE_POST_NEW_ARTICLE_SUCCESS, vous créez un nouvel état, qui est un objet, avec une propriété arr - {arr:[action.articleData, ...state]}.

retour au lieu d'un nouveau tableau avec la nouvelle articleData, et la propagation des state en elle:

case 'ARTICLE_POST_NEW_ARTICLE_SUCCESS': 
     return [action.articleData, ...state] 

En outre, depuis l'état du réducteur est un tableau, changer l'état initial à un tableau vide:

export function articleData(state = [], action) { 
+0

l'état est un objet et non un tableau –

+0

L'état de ce réducteur est un tableau. –

+0

Je ne pense pas: 'state = {}' est l'état initial. –