Redux has greatly helped in reducing the complexities of state management. Its one way data flow is easier to reason about and it also provides a powerful mechanism to include middlewares which can be chained together to do our biding. One of the most common use cases for the middleware is to make async calls in the application. Different middlewares like redux-thunk, redux-sagas, redux-observable, etc are a few examples. All of these come with their own learning curve and are best suited for tackling different scenarios.
But what if our use-case is simple enough and we don’t want to have the added complexities that implementing a middleware brings? Can we somehow implement the most common use-case of making async API calls using only redux and javascript?
The answer is Yes! This blog will try to explain on how to implement async action calls in redux without the use of any middlewares.
So let us first start by making a simple react project by using create-react-app
npx create-react-app async-redux-without-middlewares
cd async-redux-without-middlewares
npm startAlso we will be using react-redux in addition to redux to make our life a little easier. And to mock the APIs we will be using https://jsonplaceholder.typicode.com/
We will just implement two API calls to not to over complicate things.
Create a new file called api.js .It is the file in which we will keep the fetch calls to the endpoint.
export const getPostsById = id => fetch(`https://jsonplaceholder.typicode.com/Posts/${id}`);
export const getPostsBulk = () => fetch("https://jsonplaceholder.typicode.com/posts");Each API call has three base actions associated with it. Namely, REQUEST, SUCCESS and FAIL. Each of our APIs will be in one of these three states at any given time. And depending on these states we can decide how to show our UI. Like when it is in REQUEST state we can have the UI show a loader and when it is in FAIL state we can show a custom UI to tell the user that something has went wrong.
So we create three constants of REQUEST, SUCCESS and FAIL for each API call which we will be making. In our case the constants.js file will look something like this:
export const GET_POSTS_BY_ID_REQUEST = "getpostsbyidrequest";
export const GET_POSTS_BY_ID_SUCCESS = "getpostsbyidsuccess";
export const GET_POSTS_BY_ID_FAIL = "getpostsbyidfail";
export const GET_POSTS_BULK_REQUEST = "getpostsbulkrequest";
export const GET_POSTS_BULK_SUCCESS = "getpostsbulksuccess";
export const GET_POSTS_BULK_FAIL = "getpostsbulkfail";The store.js file and the initialState of our application is as follows:
import { createStore } from 'redux'
import reducer from './reducers';
const initialState = {
byId: {
isLoading: null,
error: null,
data: null
},
byBulk: {
isLoading: null,
error: null,
data: null
}
};
const store = createStore(reducer, initialState, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
export default store;As can be seen from the above code, each of our APIs data lives in one object the the state object. Keys isLoading tells us if the API is in the REQUEST state.
Now as we have our store defined, let us see how we will manipulate the statewith different phases that an API call can be in. Below is our reducers.js file.
import {
GET_POSTS_BY_ID_REQUEST,
GET_POSTS_BY_ID_SUCCESS,
GET_POSTS_BY_ID_FAIL,
GET_POSTS_BULK_REQUEST,
GET_POSTS_BULK_SUCCESS,
GET_POSTS_BULK_FAIL
} from "./constants";
const reducer = (state, action) => {
switch (action.type) {
case GET_POSTS_BY_ID_REQUEST:
return {
...state,
byId: {
isLoading: true,
error: null,
data: null
}
}
case GET_POSTS_BY_ID_SUCCESS:
return {
...state,
byId: {
isLoading: false,
error: false,
data: action.payload
}
}
case GET_POSTS_BY_ID_FAIL:
return {
...state,
byId: {
isLoading: false,
error: action.payload,
data: false
}
}
case GET_POSTS_BULK_REQUEST:
return {
...state,
byBulk: {
isLoading: true,
error: null,
data: null
}
}
case GET_POSTS_BULK_SUCCESS:
return {
...state,
byBulk: {
isLoading: false,
error: false,
data: action.payload
}
}
case GET_POSTS_BULK_FAIL:
return {
...state,
byBulk: {
isLoading: false,
error: action.payload,
data: false
}
}
default: return state;
}
}
export default reducer;By giving each individual API call its own variable to denote the loading phase we can now easily implement something like multiple loaders in the same screen according to which API call is in which phase.
Now to actually implement the async behaviour in the actions we just need a normal JavaScript function which will pass the dispatch as the first argument. We pass dispatch to the function because it dispatches actions to the store. Normally a component has access to dispatch but since we want an external function to take control over dispatching, we need to give it control over dispatching.
const getPostById = async (dispatch, id) => {
dispatch({ type: GET_POSTS_BY_ID_REQUEST });
try {
const response = await getPostsById(id);
const res = await response.json();
dispatch({ type: GET_POSTS_BY_ID_SUCCESS, payload: res });
} catch (e) {
dispatch({ type: GET_POSTS_BY_ID_FAIL, payload: e });
}
};And a function to give dispatch in the above function’s scope:
export const getPostByIdFunc = dispatch => {
return id => getPostById(dispatch, id);
}So now our complete actions.js file looks like this:
import {
GET_POSTS_BY_ID_REQUEST,
GET_POSTS_BY_ID_SUCCESS,
GET_POSTS_BY_ID_FAIL,
GET_POSTS_BULK_REQUEST,
GET_POSTS_BULK_SUCCESS,
GET_POSTS_BULK_FAIL
} from "./constants";
import {
getPostsById,
getPostsBulk
} from "./api";
const getPostById = async (dispatch, id) => {
dispatch({ type: GET_POSTS_BY_ID_REQUEST });
try {
const response = await getPostsById(id);
const res = await response.json();
dispatch({ type: GET_POSTS_BY_ID_SUCCESS, payload: res });
} catch (e) {
dispatch({ type: GET_POSTS_BY_ID_FAIL, payload: e });
}
};
const getPostBulk = async dispatch => {
dispatch({ type: GET_POSTS_BULK_REQUEST });
try {
const response = await getPostsBulk();
const res = await response.json();
dispatch({ type: GET_POSTS_BULK_SUCCESS, payload: res });
} catch (e) {
dispatch({ type: GET_POSTS_BULK_FAIL, payload: e });
}
};
export const getPostByIdFunc = dispatch => {
return id => getPostById(dispatch, id);
}
export const getPostsBulkFunc = dispatch => {
return () => getPostBulk(dispatch);
}Once this is done, all that is left to do is to pass these functions in mapDispatchToProps of our connected component.
const mapDispatchToProps = dispatch => {
return {
getPostById: getPostByIdFunc(dispatch),
getPostBulk: getPostsBulkFunc(dispatch)
}
};Our App.js file looks like the one below:
import React, { Component } from 'react';
import './App.css';
import { connect } from 'react-redux';
import { getPostByIdFunc, getPostsBulkFunc } from './actions';
class App extends Component {
render() {
console.log(this.props);
return (
<div className="App">
<button onClick={() => {
this.props.getPostById(1);
}}>By Id</button>
<button onClick={() => {
this.props.getPostBulk();
}}>In bulk</button>
</div>
);
}
}
const mapStateToProps = state => {
return {
state
};
}
const mapDispatchToProps = dispatch => {
return {
getPostById: getPostByIdFunc(dispatch),
getPostBulk: getPostsBulkFunc(dispatch)
}
};This is how we do async calls without middlewares in redux. This is a much simpler approach than using a middleware and the learning curve associated with it. If this approach covers all your use cases then by all means use it.
Conclusion
This type of approach really shines when you have to make a simple enough application like a demo of sorts, where API calls is all the side-effect that you need. In larger and more complicated applications there are a few inconveniences with this approach. First we have to pass dispatch around to which seems kind of yucky. Also, remember which call requires dispatch and which do not.
The full code can be found here.