Redux的異步操作

Question

我試圖建立一個動作，以至於當我做一個AJAX調用話，我可以斷火另一個動作是與從調用返回的數據更新狀態：

行動。 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); 
      });  
} 

在我的組件

我打電話，像這樣的動作：

this.props.teamActions.getUserTeams() 

的getUserTeams動作觸發關閉很好，因爲我得到從api返回的控制檯日誌，但setUserTeamsState似乎沒有。我試圖儘可能遵循在線示例，但不知道我在哪裏出錯了？

編輯

這裏是我下面的減速機：

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; 

如果actions.js我console.log(dispatch(setUserTeamsState(response.data)))它返回我的setUserTeamsState對象，所以我不知道爲什麼它沒有執行。這是否是正確的方法？

Answer 1

如果console.log顯示正確的值，我相信你可能忘記添加你的reducer或action類型不符合你的reducer已知的任何類型。那些錯別字的解決方案是將所有類型的單獨的文件，只是出口他們像：

（動作/ types.js）

export const SET_USER_TEAMS = 'SET_USER_TEAMS';

然後，只需將它們導入減速和你的行動。

如果這不是一個錯字，那麼你應該檢查reducer是否被派遣。如果這是你的減速器有一些錯誤。

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