react+redux+axios:动作未发送到减速器

react + redux + axios: actions not sent to reducers

本文关键字：减速器 react+redux+axios      更新时间：2024-01-06

我正在构建一个React+Redux应用程序。我正在使用axios进行api请求。我试图提出三个api请求，一个接一个。第一个需要在第二个运行之前完成，因为第一个返回第二个在请求中使用的用户对象。

我运行getUser，只有与getUser相关的应用程序状态得到更新。但是其他两个api并没有按照它们应该的方式更新应用程序状态。getUserScores和getCustomerEquations都不会实际更改状态。从我的吞咽过程中，我知道所有API请求都是成功的。从console.log中，我知道axios承诺已经创建。

因此，由于某种未知的原因，我的函数返回的对象没有到达减速器。这里少了什么？

谢谢你的帮助！

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import ReduxPromise from 'redux-promise';   //this is middleware
import App from './containers/app';
import reducers from './reducers/index';
const createStoreWithMiddleware = applyMiddleware(ReduxPromise)(createStore);
ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <App />
  </Provider>
  , document.getElementById('container'));

动作/索引：

import axios from 'axios';
export function getUser(email) {
  let url = 'api/users?user__email=' + email;
  axios.get(url)
      .then((response) => {
        getCustomerEquations(response.data[0].customer);
        getUserScores(response.data[0].id);
      });
  let request = axios.get(url);
  return {
    type: 'GET_USER',
    payload: request
  }
}
export function getUserScores(userId) {
  let url = '/api/user_scores?user__id=' + userId;

  let request = axios.get(url);
  return {
    type: 'GET_USER_SCORES',
    payload: request
  };
}
export function getCustomerEquations(customerId) {
  let url = '/api/equations?customer__id=' + customerId;
  let request = axios.get(url);
  return {
    type: 'GET_CUSTOMER_EQUATIONS',
    payload: request
  };
}

reducer/reducer getUserScores:

import React from 'react';
import { GET_USER_SCORES } from '../actions/index';
export default function(state = ["d"], action = {}) {
  switch(action.type) {
    case GET_USER_SCORES:
      // do not manipulate existing state. create a new one
      //ES6 way to write 'return state.concat(action.payload.data);
      console.log('userScores in Reducer:', action.payload.data);
      return action.payload.data;
    default:
      console.log('userScores-Reducer: the case didnt match', action.type);
  }
  return state;
}

您需要返回一个函数而不是一个操作，并且只有当您的条件匹配时才调度该操作。你可以尝试写你自己的简单middle版本的middle where，或者你可以使用thunkhttps://github.com/gaearon/redux-thunk

单个操作可能会触发多个状态更改。例如，检查以下内容：

function firstReducer(state, action) {
    switch (action.type) {
        case ACTION_X:
            // handle action x
    }
}
function secondReducer(state, action) {
    switch (action.type) {
        case ACTION_X:
            // handle action x
    }
}
function thirdReducer(state, action) {
    switch (action.type) {
        case ACTION_X:
            // handle action x
    }
}

在您的情况下，请使用GET_USER_SCORES_FULFILLED而不是GET_USER_SCORES。因此切换情况如下：

switch(action.type) {
    case GET_USER_SCORES_FULFILLED:
      // do not manipulate existing state. create a new one
      //ES6 way to write 'return state.concat(action.payload.data);
      console.log('userScores in Reducer:', action.payload.data);
      return action.payload.data;
      break;
    default:
      console.log('userScores-Reducer: the case didnt match', action.type);
  }

检查以下链接，可能会有所帮助。

  • 使用axios HTTP客户端获取数据的Redux中间件
  • 用于Redux的Thunk中间件
  • 了解Redux中间件

看起来您没有返回或等待actions/index.js文件中的承诺

import axios from 'axios';
export async function getUser(email) {
  let url = 'api/users?user__email=' + email;
  // you are doing it once
  const response = await axios.get(url)
  getCustomerEquations(response.data[0].customer);
  getUserScores(response.data[0].id);
  // why do it again ?
  let request = await axios.get(url);
  return {
    type: 'GET_USER',
    payload: request
  }
}
export async function getUserScores(userId) {
  let url = '/api/user_scores?user__id=' + userId;

  let request = await axios.get(url);
  return {
    type: 'GET_USER_SCORES',
    payload: request
  };
}
export async function getCustomerEquations(customerId) {
  let url = '/api/equations?customer__id=' + customerId;
  let request = await axios.get(url);
  return {
    type: 'GET_CUSTOMER_EQUATIONS',
    payload: request
  };
}

或者，如果您的节点版本不支持异步等待：

import axios from 'axios';
export function getUser(email) {
  let url = 'api/users?user__email=' + email;
  return axios.get(url)
  .then((response) => {
    getCustomerEquations(response.data[0].customer);
    getUserScores(response.data[0].id);
    return axios.get(url).then(request => {
      return {
        type: 'GET_USER',
        payload: request
      };
    });
  });
}
export function getUserScores(userId) {
  let url = '/api/user_scores?user__id=' + userId;
  return axios.get(url).then(request => {
    return {
      type: 'GET_USER_SCORES',
      payload: request
    };
  });
}
export function getCustomerEquations(customerId) {
  let url = '/api/equations?customer__id=' + customerId;
  return axios.get(url).then(request => {
    return {
      type: 'GET_CUSTOMER_EQUATIONS',
      payload: request
    };
  });
}
相关文章：