actions Redux Async

Question

Je suis en train de configurer une action pour que quand je fais un appel AJAX Je peux alors déclencher une autre action qui met à jour l'état avec les données renvoyées par l'appel:

actions. js

import axios from 'axios'; 

export const setUserTeamsState = (teams) => { 
    return { 
     type:'SET_USER_TEAMS', 
     teams:teams 
    } 
} 


export const getUserTeams = (dispatch) => { 

    return axios.get('http://localhost:7777/getteams') 
      .then((response) => { 
       console.log(response.data) 
       dispatch(setUserTeamsState(response.data)) 
      }) 
      .catch((error) => { 
       //console.log(error); 
      });  
} 

dans mon élément, je prends l'action comme si:

this.props.teamActions.getUserTeams() 

l'action getUserTeams tire de bien parce que je reçois le journal de la console est revenu de l'API mais le setUserTeamsState ne semble pas. J'ai essayé de suivre les exemples en ligne du mieux que je peux mais je ne sais pas où je me suis trompé?

EDIT

Voici mon réducteur ci-dessous:

Reducer.js

const initialState = { 
    userTeams: [] 
}; 

const manageTeamsReducer = (state = initialState, action) => { 
    switch (action.type) { 
    case 'SET_USER_TEAMS': { 
     const newState = Object.assign(state, { 
     userTeams:action.teams 
     }); 
     return newState; 
    } 
    default: 
     return state; 
    } 
} 

export default manageTeamsReducer; 

si je actions.js console.log(dispatch(setUserTeamsState(response.data))) retourne l'objet mon setUserTeamsState donc je suis Je ne sais pas pourquoi il ne s'exécute pas. Est-ce la bonne approche pour commencer?

Answer 1

Si le fichier console.log vous indique une valeur correcte, je crois que vous avez peut-être oublié d'ajouter votre réducteur ou le type d'action qui ne correspond à aucun type connu de vos réducteurs. La solution à ces fautes de frappe est de garder tous les types dans un fichier séparé et il suffit de les exporter comme:

(actions/types.js)

export const SET_USER_TEAMS = 'SET_USER_TEAMS';

Ensuite, il suffit de les importer dans le réducteur et dans votre action.

Si ce n'est pas une faute de frappe, alors vous devriez vérifier si le réducteur est distribué. Si c'est le cas, il y a un bug dans votre réducteur.

Answer 2

Essayez ceci:

const manageTeamsReducer = (state = initialState.userTeams, action) => { 
    switch (action.type) { 
    case 'SET_USER_TEAMS': 
     return [ 
    action.teams 
    ]; 
    break; 
    default: 
     return state; 
    } 
} 

Ceci est en supposant que vous action.teams est un tableau d'objets de l'équipe ...

essayer dans votre action ainsi:

export const getUserTeams =() => (dispatch) => { 

    return axios.get('http://localhost:7777/getteams') 
      .then((response) => { 
       console.log(response.data) 
       dispatch(setUserTeamsState(response.data)) 
      }) 
      .catch((error) => { 
       //console.log(error); 
      });  
}