Redux Async Aktionen

Question

Ich versuche, um eine Aktion zu gründen, damit, wenn ich einen AJAX-Aufruf machen kann ich dann eine andere Aktion abfeuern, die den Zustand der Daten aktualisiert, die aus dem Aufruf zurückgegeben wird:

Aktionen. 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); 
      });  
} 

in meiner Komponente nenne ich die Aktion wie folgt:

this.props.teamActions.getUserTeams() 

die getUserTeams Aktion feuert in Ordnung, weil ich Das Konsolenprotokoll kam von der API zurück, aber die setUserTeamsState scheint nicht zu sein. Ich habe versucht, Online-Beispielen so gut wie möglich zu folgen, aber nicht sicher, wo ich falsch gelaufen bin?

EDIT

Hier ist mein Minderer unter:

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; 

wenn in actions.js ich console.log(dispatch(setUserTeamsState(response.data))) es gibt meine das setUserTeamsState Objekt so ich bin nicht sicher, warum es nicht ausgeführt wird. Ist das der richtige Ansatz für den Anfang?

Answer 1

Wenn die console.log zeigt Ihnen den richtigen Wert, glaube ich, dass Sie vergessen haben, Ihre Reducer oder Art der Aktion passt nicht alle Typen zu Ihren Reducern passen. Die Lösung für diesen Fehler ist, alle Arten in separater Datei zu halten und exportieren wie:

(Aktionen/types.js)

export const SET_USER_TEAMS = 'SET_USER_TEAMS';

Dann sie in Minderer und in Ihrer Aktion nur importieren.

Wenn das kein Tippfehler ist, sollten Sie überprüfen, ob der Reducer überhaupt versandt wird. Wenn es einen Fehler in Ihrem Reducer gibt.

Answer 2

Try This:

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

Dies wird vorausgesetzt, Sie action.teams ist ein Array von Team Objekte ...

dies auch in Ihrer Aktion versuchen:

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