돌아 오는 비동기 작업

Question

나는 설정에 작업을 시도하고 난 다음 호출에서 반환 된 데이터 상태를 업데이트 다른 액션 해고 할 수있는 AJAX 호출 할 때 너무 :

작업을.

this.props.teamActions.getUserTeams() 

getUserTeams 행동이 내가 얻을 때문에 떨어져 잘 화재 : 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); 
      });  
} 

는 그래서 같은 조치가 호출 콘솔 로그가 API에서 반환되었지만 setUserTeamsState은 보이지 않습니다. 내가 할 수있는 최선의 방법으로 온라인 예제를 따르려고했으나 어디서 잘못되었는지 모르겠습니다. actions.js에 나는 그것이 내가 해요 그래서 내 setUserTeamsState 객체를 반환 console.log(dispatch(setUserTeamsState(response.data))) 경우

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; 

: 여기에 편집

아래 내 감속기입니다 왜 실행되지 않는지 확신하지 못합니다. 이것이 올바른 접근 방법입니까?

Answer 1

console.log에 올바른 값이 표시되면 나는 감속기를 추가하는 것을 잊었거나 감속기에 알려진 유형과 일치하지 않는 동작 유형을 생각할 수 있습니다.

export const SET_USER_TEAMS = 'SET_USER_TEAMS';

가 그럼 그냥 감속기와 액션에 가져올

(액션/types.js) : 그 오타에 대한 해결책은 별도의 파일에 모든 유형을 유지하고처럼 그들을 내보내는 것입니다.

오타가 아닌 경우 감속기가 전혀 발송되지 않았는지 확인해야합니다. 감속기에 약간의 버그가있는 경우.

Answer 2

이 시도 :

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

이것은 당신이 action.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); 
      });  
}