How do I add axios to react-redux-universal-hot-example starter kit?

Question

So I picked react-redux-universal-hot-example as a starter kit.

I want to make ajax calls to 3rd party API. (I want to use OpenWeatherMap API)

I want to use axios and react-promise middleware.

The first part installation is easy:

npm install --save redux-promise

npm install --save axios

Then I need to apply redux-promise middleware ... I think it goes into create.js somehow.

So I have several questions (all specific to react-redux-universal-hot-example) :

1. Is it the right way to do 3rd party calls using axios with redux-promise or the kit already have another way to do ajax requests?
2. Is create.js the right place to add redux-promise middleware?
3. Also, is there a concise syntax to apply multiple middlewares at the same time?

Answer 1

I am not 100% sure if you want to use react-promise or redux-promise. I am assuming the redux version. Which yea that create.js file is the right place to add it. You import a middleware from redux-promise and then add it to the lost of middlewares on line 9 import promiseMiddleware from 'redux-promise';

const middleware = [createMiddleware(client), reduxRouterMiddleware, promiseMiddleware];

So to answer your questions: 1. I am not 100% sure if the starter kit has a what to fetch 3rd party data. However using axios with redux-promise is exactly what I do. 2. Yes, see above on how. 3. Yep and that starter kit is showing one way which is creating an array of middlewares and then using the new spread operator it feed them into the applyMiddleware function. Which is a curried function that will then accept the createStore function. This is shown in the create.js file on line 21. Which is what the finalCreateStore will be during production. 4. The way I have been using this is with redux-actions which create Flux Standard Actions So..

// actionCreator
import { createAction } from 'redux-actions';
import { FETCH_DATA } from '../constants; // a file that exports constants
const fetchData = createAction(FETCH_DATA);
// reducer
const reducer = (state, action) => {
    switch(action.type) {
        case FETCH_DATA:
            return {
                ...state,
                fetchedData: action.payload.data
            };
        default: 
            return state;
    }
}

// then dispatch the promise and not an action
store.dispatch(fetchData(axios.get('some_route')));

Then redux-promise 'intercepts' the promise and will resolve it. Once the promise resolves the action is then re-dispatched with the results in the payload. With axios you will get back an object that had the data you want as a property of that object. Which is shown is in the reducer with action.payload.data

A project I am working on that has this as an example. Please not the actions have been wrapped with the dispatch call so all I have to do is call the actionCreators directly to get the same result as dispatching. This is explained in redux docs on bindActionCreators.

actionCreator

reducer

Component is where I dispatch the action

Where I hook up the middleware <-- similar to your create.js file

Again by dispatching the promise redux-promise intercepts(my way of understanding) the promise, resolves it and then dispatches the same action again but with the results of the promise on the payload property of the action object.