Question

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

我运行getUser，只有与getUser相关的应用程序状态才会更新。但其他两个apis不会更新应用程序状态。 getUserScores和getCustomerEquations都没有实际改变状态。从我的gulp过程中我知道所有API请求都是成功的。从console.log我知道axios promises已经创建。

因此，由于某些未知原因，我的函数返回的对象并没有将它转换为reducers。这里缺少什么？

感谢您的帮助！

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

减速器/减速器-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;
}

Answer 1

您需要返回一个函数而不是一个操作，并仅在匹配条件时调度操作。您可以尝试编写自己的简单中间版本的中间位置，或者您可以使用thunk https://github.com/gaearon/redux-thunk

Answer 2

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

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

  }

在您的情况下，请使用 GET_USER_SCORES_FULFILLED 而不是 GET_USER_SCORES 。所以switch-case将如下：

{{1}}

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

Answer 3

您似乎没有在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
    };
  });
}

react + redux + axios：没有发送给减速器的动作

3 个答案: