ReactJS with Redux Thunk

Installation and Setup

First, create a React project with create-react-app:

npx create-react-app react-with-redux-thunk

If create-react-app version < 5.0.0:

npx create-react-app@latest react-with-redux-thunk

npx create-react-app@5.0.0 react-with-redux-thunk

If you're using the basic Redux createStore API and need to set this up manually, first add the redux-thunk package:

yarn add redux-thunk react-redux redux redux-logger

After installing, we need to combine reducer item into a rootReducer to create a single object in ./store/reducer.js file:

import { combineReducers } from "redux";

export const Reducers = combineReducers({
  // ...
});

we need to enable redux thunk by use applyMiddleware() in ./store/index.js:

import { createStore, applyMiddleware } from "redux";
import thunkMiddleware from "redux-thunk";
import { createLogger } from "redux-logger";
import { Reducers } from "./reducer";

const loggerMiddleware = createLogger();
export const store = createStore(Reducers, applyMiddleware(thunkMiddleware, loggerMiddleware));

Configure the provide it to your app

Now, include <Provider /> to ./src/index.js and pass the store as props

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { store } from "./store";
import App from "./App";
import "./index.css";

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

Go to [Part 2] How to use redux thunk

Blog

ReactJS with Redux Thunk

Sirima Insorn

Installation and Setup

Configure the provide it to your app

Join Our Newsletter. No Spam, Only the good stuff.

Related