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.

Leyte

there's several approaches, if it's a simple api call you can put it on the component lifecycle methods, like componentdidmount, and then dispatch an action when you get a response back, however it gets tricky to debug and maintain as soon as you start adding a few of this api calls in different components, the better approach in that case would be to use middleware, the most popular is probably redux-thunk or redux-sagas, I personally prefer sagas – Pacien

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

Disentangle

How to you dispatch/invoke this action? – Wirephoto

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.

Seraph

Answer 3

Behavior such as AJAX calls are referred to as "side effects", and generally live in either your components, "thunk" action creators, or other similar Redux side effects addons such as "sagas".

Please see this answer in the Redux FAQ for more details:

Elflock