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
Or
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")
);
Top comments (0)