Redux的异步操作

问题描述：

我试图建立一个动作，以至于当我做一个AJAX调用话，我可以断火另一个动作是与从调用返回的数据更新状态：Redux的异步操作

行动。 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对象，所以我不知道为什么它没有执行。这是否是正确的方法？

你看到控制台上的任何错误？你是否得到任何类型的异常？ – mersocarlin

当'SET_USER_TEAMS'被调度时，你的reducer是否被调用？ – topher

它看起来像你在初始状态下将userTeams设置为一个数组，但在reducer调用中返回并将Object作为新状态...... –

答

如果console.log显示正确的值，我相信你可能忘记添加你的reducer或action类型不符合你的reducer已知的任何类型。那些错别字的解决方案是将所有类型的单独的文件，只是出口他们像：

（动作/ types.js）

export const SET_USER_TEAMS = 'SET_USER_TEAMS';

然后，只需将它们导入减速和你的行动。

如果这不是一个错字，那么你应该检查reducer是否被派遣。如果这是你的减速器有一些错误。

张贴我的减速器上面，看起来顺序 –

是所有执行的减速器？你能看到它的记录行动吗？（添加console.log（动作）;） – primq

答

试试这个：

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

仍然不起作用恐怕 –

一次小更新到初始状态 –

它仍然是一样的东西，没有更新！ –

Redux的异步操作

相关推荐