Where to put API calls in React/Redux architecture?

Question

I am trying to retrieve some data from an API and pass it into my application. Being new to React/Redux however, I am wondering where to make these calls from and how to pass it into my application? I have the standard folder structure (components, reducers, containers, etc.) but I'm not sure where to place my API calls now.

Answer 1

The easiest way to get started with this is to just add it into your actions, using a function called a thunk along with redux-thunk. All you need to do is add thunk to your store:

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';

const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

Then create a function in your actions that calls the api:

export const getData() {
  (dispatch) => {
    return fetch('/api/data')
      .then(response => response.json())
      .then(json => dispatch(resolvedGetData(json)))
  }
}

export const resolvedGetData(data) {
  return {
    type: 'RESOLVED_GET_DATA',
    data
  }
}

Answer 2

The "Teach a man to fish answer."

This depends on the type of call and the situation.

1. Generally for simple "gets" this can easily be done by placing them into your action creators as Nader Dabit has shown.
2. There are many side effect management libraries which would opt for you to place them in their blocks(redux-sagas, axios calls, redux-thunk)

I use redux-sagas for now. At least until we decide yay or nay on async/await which is possibly coming in a newer version of JS.

This may be the most important part!

Just be sure to take into account the general "conventions" that are used with your particular set of tools usually found in the documentation, and be sure to google "best practices" in the future for things like this. This will help others new to your project to get their bearings and just jump in without ramping up learning your new customized version.