2

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

我运行 getUser，只有与 getUser 相关的应用程序状态得到更新。但是其他两个 api 并没有按应有的方式更新应用程序状态。getUserScores 和 getCustomerEquations 都不会真正改变状态。从我的 gulp 过程中，我知道所有的 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
  };
}

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

3 回答 3

1

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

于 2018-02-27T04:45:34.860 回答
0

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

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-case 将如下所示：

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

  }

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

于 2017-11-07T05:42:45.970 回答
0

看起来您没有返回或等待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
    };
  });
}
于 2018-02-27T04:32:26.687 回答