Redux异步操作

Question

我正在尝试设置一个操作，以便在进行AJAX调用时，可以触发另一个操作，该操作用调用返回的数据更新状态：

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

在我的组件中，我调用了这样的操作：

this.props.teamActions.getUserTeams()

getUserTeams操作可以正常运行，因为我从api返回控制台日志，但setUserTeamsState日志似乎没有。我试着尽我所能地学习网上的例子，但不知道i#ve哪里出了问题？

编辑

下面是我的减速机：

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 i console.log(dispatch(setUserTeamsState(response.data)))中，它返回我的setUserTeamsState对象，所以我不知道它为什么不执行。这是一种正确的方法吗？

Answer 1

如果console.log显示了正确的值，我相信您可能忘记添加减速器或操作类型不匹配任何类型已知的减速机。这些排版的解决方案是将所有类型保存在单独的文件中，并将它们导出如下：

(行动/类型.)

export const SET_USER_TEAMS = 'SET_USER_TEAMS';

然后把它们导入减速机和你的操作中。

如果这不是一个错误，那么您应该检查减速机是否被派遣。如果是的话，你的减速机里有错误。

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