a React-Redux boilerplate

with Redux-thunk as a middleware

Yogesh Datir
3 min readJun 15, 2020

Steps to add reducers:

  • store.js
  • reducers (rootReducer and others)
  • wrap App.js with Provider
  • add actions and types
  • use redux in components with connect() method.
React redux flow diagram
React Redux Flow Diagram
Folder Structure used in this project

Detail Guide to create a React-Redux boiler-plate:

  1. Install redux and necessary libraries.
    npm i redux react-redux redux-thunk redux-devtools-extension
  • React Redux is the official React binding for Redux. It lets your React components read data from a Redux store, and dispatch actions to the store to update data.
  • Redux Thunk: With a plain basic Redux store, you can only do simple synchronous updates by dispatching an action. Middleware extends the store’s abilities, and let you write async logic that interacts with the store.
  • Redux Devtools Extension: to enable easy debugging and time travel.

2. Create src/store.js.

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from…

--

--

Yogesh Datir

A developer passionate about creating efficient, user-friendly apps with JavaScript and React. I love learning new tech and sharing what I know.