Tips & Tricks for your React-Redux Application

Tips & Tricks for your React-Redux Application

<img src="*4877k4Hq9dPdtmvg9hnGFA.jpeg">

Please note: This assumes you are familiar with the flow of React & Redux. We are using the redux-saga middleware in our example. The focus of this article is more about boilerplate and not styling.

If you are accustomed to building React applications with Redux, you’ll know there is a lot of associated boilerplate. When implementing a feature, it usually involves the following steps.

  1. Build a component and determine the state/data that is needed for our component to function correctly.
  2. Once we have the state we need, we map our Component’s state to props passed from the store.
  3. To get that state — in our case it’s a collection of users — we’ll need to call an API endpoint provided from the backend guys. This means we need to trigger an action with a dispatch in our Component.
  4. Our Redux saga middleware listens for this action and then makes a request to our API service to fetch the users when the action has been fired.
  5. When the saga has finished making the call and it was successful, it will trigger an effect with a new success action. The reducer will then update the store with the people list. The Component is now aware of the change of props and will re-render with the new state retrieved.

We created a simple create-react-app for this ‘People’ application. It will render a list of people. Simplez… (Try to make the sound the meerkat makes on the adverts but fail miserably).

We added a Header and Panel component, but our focus is on a component called PeopleList that will just render an array of people to the browser. While we are waiting for the data from the API, we’ll show a loading animation.

Please note: We structure our components in the following way.


This allows us to break apart the connection with Redux and test the component in isolation. Now onto the component implementation.


import React, { Component } from 'react';
import Loading from 'react-loading';
import {
  shape, arrayOf, string, func, bool, number,
} from 'prop-types';
import './PeopleList.css';

import Panel from '../Panel';

import { getPeople } from '../../actions';

class PeopleList extends Component { componentDidMount() { const { fetchPeople } = this.props;



showUsers() { const { people } = this.props;

return =&gt; (
  &lt;div key={} className="person"&gt;
    &lt;div className="bio"&gt;{}&lt;/div&gt;


render() { const { hasLoadedPeople } = this.props; if (hasLoadedPeople === false) { return <Loading className="loading" color="#14233c" />; } return ( <Panel size="md"> <div className="people-list">{this.showUsers()}</div> </Panel> ); } }

PeopleList.propTypes = { people: arrayOf( shape({ id: number, name: string, }), ), hasLoadedPeople: bool.isRequired, fetchPeople: func.isRequired, };

PeopleList.defaultProps = { people: [], };

export const mapStateToProps = ({ people: { list, hasLoadedPeople } }) => ({ people: list, hasLoadedPeople, });

export const mapDispatchToProps = { fetchPeople: getPeople.request, };

export default PeopleList;

Now we connect it to redux in the index file.


import { connect } from 'react-redux';
import PeopleList, { mapStateToProps, mapDispatchToProps } from './PeopleList';

export default connect( mapStateToProps, mapDispatchToProps, )(PeopleList);

Next thing we will do is define our action types.

export const GET_PEOPLE = 'GET_PEOPLE';

Now usually we would define an action type for each state of a request when making an API call. Like so:

export const GET_PEOPLE = 'GET_PEOPLE';

Then in the reducer, we’d usually define a switch case for each of these action types.

switch (action.type)
  ... update state
  ... update state
  ... update state with users

We can make use of redux-saga-routines to simplify this boilerplate, by doing the following.

Please note: In your own application you will need to

npm install redux-saga-routines


import { createRoutine } from 'redux-saga-routines';

export const GET_PEOPLE = 'GET_PEOPLE';

export const getPeople = createRoutine(GET_PEOPLE);

Now getPeople will be an object that has all of these states. So we can simply import the routine alone instead of multiple action types.


import { getPeople } from '../actions';

const INITIAL_STATE = { hasLoadedPeople: false, errorGettingPeople: false, list: [], };

const people = (state = INITIAL_STATE, { type, payload }) => { switch (type) { case getPeople.REQUEST: return { ...state, list: [], hasLoadedPeople: false, errorGettingPeople: false, }; case getPeople.FAILURE: return { ...state, errorGettingPeople: true, }; case getPeople.SUCCESS: return { ...state, hasLoadedPeople: true, list: payload.people, }; default: return state; } };

export default people;

The problem with having a large switch case in your reducers like above is that you may have issues with redeclaring variables or constants in the same lexical scope. The linter could also complain as you do to that neighbour with the dog that won’t stop barking all night.

We can make use of something called handleActions that will give each action its own lexical scope to avoid clashing with the other actions.

Please note: In your own application you will need to

npm install redux-actions

src/reducers/people.js (New version)

import { handleActions } from 'redux-actions';

import { getPeople } from '../actions';

const INITIAL_STATE = { hasLoadedPeople: false, errorGettingPeople: false, list: [], };

const people = handleActions( { [getPeople.REQUEST]: state => ({ ...state, list: [], hasLoadedPeople: false, errorGettingPeople: false, }), [getPeople.FAILURE]: state => ({ ...state, errorGettingPeople: true, }), [getPeople.SUCCESS]: (state, { payload }) => ({ ...state, hasLoadedPeople: true, list: payload.people, }), }, INITIAL_STATE, );

export default people;

Now we have cleaned up our reducer and action, we can check out our saga. You can see below we import the getPeople routine, and it has a function called success and failure. At the bottom, you can see we are listening for a REQUEST, and then firing the getPeopleRequest generator function which in turn calls the service and gets us back the data we need.


import { call, put, takeEvery } from 'redux-saga/effects';

import API from '../services/api'; import { getPeople } from '../actions';

export function* callPeopleService() { return yield call(API.getPeople); }

export function* getPeopleRequest() { try { const { data } = yield call(callPeopleService); yield put( getPeople.success({ people: data, }), ); } catch (error) { yield put(getPeople.failure(error.message)); } }

export default function* peopleSaga() { yield takeEvery(getPeople.REQUEST, getPeopleRequest); }

The API service is simply calling a Fake API on the web. Here it is for clarity.


The service below injects axios (The library used to make HTTP requests) through the constructor. This makes it much easier to mock in unit tests. This is an approach known as dependency injection.

import axios from 'axios';


class API { constructor(api) { this.api = api; }

getPeople = () => { return this.api.get(GET_PEOPLE_ENDPOINT); }; }

export default new API(axios);

When I run the application, I see my redux saga routine in action and the store being updated using the Redux Dev tools.

Hope you enjoyed reading along. The source code for this project can be found here. Please drop a few claps if you enjoyed and leave feedback or any questions you may have. Thanks!

By : Shaun Michael Stone

reactjs redux

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

An intro to Redux and how state is updated in a Redux application

I started learning Redux a few days back and it was an overwhelming concept for me at the start. After polishing my skills in ReactJS by making a&nbsp;<a href="" target="_blank">personal book reading application</a>, I headed towards Redux to learn more about it.

What is the Redux Saga Effect?

Effects are the kind of utility that’s provided by the redux-saga package. when u invokes effects it returns object contains instructions which redux-saga interprets.

Redux Tutorial - Learn Redux from Scratch

Redux Tutorial - Learn Redux from Scratch - You'll learn: What is Redux? What is Functional Programming? Higher-order Functions; Functional Composition; Redux Architecture... Redux - A Predictable State Container for JS Apps. Redux is an open-source JavaScript library for managing application state. It is most commonly used with libraries such as React or Angular for building user interfaces. Similar to Facebook's Flux architecture, it was created by Dan Abramov and Andrew Clark.

React Boilerplates with Redux, Redux Saga and Best Practices

React Boilerplates with Redux, Redux Saga and Best Practices