Where to add server request functions in React-Redux

Question

I have the following Axios request:

componentDidMount() {
    axios.post('http://localhost:3030/api/weather/refresh').then(response => {
      store.dispatch(refreshWeather(response))
    });
  }

This sends a dispatch to Redux which is used to feed the presentational container in the common pattern.

My question is - how can I make it do this axios.post() request is re-usable in other components or parts of the app? I have got as far as having it in an external file which is imported, but is there a better way to structure my project so all axios requests are grouped together?

I have the following mapDispatchToProps:

const mapDispatchToProps = (dispatch, ownProps) => {    
  return {
    onClickRefresh: () => {
      dispatch(refreshWeather(arr))
    }
  }
}

And I want to run the same request as the componentDidMount(), but not sure of the best way to make re-usable as explained above.

Thanks

See http://stackoverflow.com/questions/35411423/how-to-dispatch-a-redux-action-with-a-timeout/35415559#35415559 , http://stackoverflow.com/questions/34570758/why-do-we-need-middleware-for-async-flow-in-redux/34599594#34599594 , and http://blog.isquaredsoftware.com/2016/10/idiomatic-redux-why-use-action-creators/ for info on moving async logic out into action creators like thunks. — markerikson, Jun 01 '17 at 20:55

score 2 · Accepted Answer · answered Jun 01 '17 at 20:40

You can accomplish this by applying the redux-thunk middleware and having an intermediary method perform the request.

const REFRESH_WEATHER = 'REFRESH_WEATHER';

export const requestWeather = () => dispatch => {
    axios.post('http://localhost:3030/api/weather/refresh').then(response => {
        dispatch(refreshWeather(response));
    });
};

const refreshWeather = (response) => {
    return {
        type: REFRESH_WEATHER,
        response,
    };
}

If you find yourself making a lot of repetitive similar requests you can build out your own api middleware to handle any requests.

score 1 · Answer 2 · answered Jun 01 '17 at 20:39

1

The pattern in Redux is to use an Async Action Creator, that way it can be re-used just like any other Action Creator and mapped to your props.

There is a good example in the official docs of how this is done.

answered Jun 01 '17 at 20:39

Laith Azer

589
2
7

score 1 · Answer 3 · answered Jun 01 '17 at 20:41

config.js

module.exports = {
  API_URL: 'http://localhost:3030/api',
};

makeRequest.js

import axios from 'axios';
import { API_URL } from './config';

module.exports = (path, method, ...args) => axios[method](API_URL + path, ...args);

actions.js

module.exports.refreshWeather = (newWeather) => ({
  type: 'REFRESH_WEATHER',
  payload: newWeather,
});

stories.js

import makeRequest from './makeRequest';
import { refreshWeather as refreshWeatherAction } from './actions';

module.exports.resfreshWeatherStory = (dispatch) => (
    makeRequest('/weather/refresh', 'post')
        .then(response => dispatch(refreshWeatherAction(response)));
);

YourComponent.js

...
import { refreshWeatherStory } from './stories';
...
componentDidMount() {
    refreshWeatherStory(store.dispatch);
}
...

OtherPlace.js

...
import { refreshWeatherStory } from './stories';

const mapDispatchToProps = dispatch => ({
    onClickRefesh: () => refreshWeatherStory(dispatch),
});
...

You get the idea

Where to add server request functions in React-Redux

3 Answers3