react + redux + axios：动作不发送到减速器

Question

I am building a React+Redux app. I am using axios to make api requests. I am trying to make three api requests, one after the other. The first needs to be complete before the second two can run, because the first returns a user object that the second two use in their request.

I run getUser, and only the app state related to getUser gets updated. But the other two apis don't update the app state as they should. Neither getUserScores nor getCustomerEquations actually change the state. From my gulp process I know that all the API requests are successful. From a console.log I know that the axios promises are created.

So for some unknown reason the objects my functions are returning aren't making it to the reducers. What is missing here?

Thanks for helping!

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

actions/index:

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

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

Answer 1

you need to return a function instead of an action and dispatch the action only when your criteria is matched. You can try writing your own simple middle version of middle where,or you can use thunk https://github.com/gaearon/redux-thunk

Answer 2

A single action might trigger several state changes. For example, check the following:

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

In your case, use GET_USER_SCORES_FULFILLED instead of GET_USER_SCORES . So switch-case will be the following:

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

  }

Check the following links, might be helpful.

• Redux middleware for fetching data with axios HTTP client
• Thunk middleware for Redux
• Understanding Redux Middleware

Answer 3

Looks like you do not return or await your promises in the actions/index.js file

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

Or if your node version does not support async await:

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