Redux is a state management tool that provides a way to have all the states of an application in one global place instead of having in each components.
Prerequisites:
- React project setup -
npx create-react-app app_name - Packages -
npm i redux react-redux @reduxjs/toolkit
Methods used:
import { combineReducers, createStore, applyMiddleware } from "redux";import { Provider, useSelector, useDispatch } from "react-redux";import { configureStore } from "@reduxjs/toolkit";
1. combineReducers
- Used to combine multiple reducers and make it one to send it to the store.
const reducer = combineReducers({
userData: userReducer,
...
<more here>
});
2. createStore (deprecated)/configureStore
- Used to create a store (redux state) using the combined reducer and also apply any middlewares if required to perform before the actions reaches the reducers.
const store = createStore(reducer, applyMiddleware(thunk, middelware2, middleware3, etc..)); // this is deprecated.
(OR)
const store = configureStore({
reducer,
middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(middleware1, middleware2, etc...)
});
3. Provider
- This component will wrap around the final component (in index.js) that is added to the DOM.
- The store is made available to the entire application through this.
ReactDOM.render(
<Provider store={store}>
<App></App>
</Provider>,
document.getElementById("root")
);
4. useSelector
- Used to access the state data from redux state.
const App = () => {
const userData = useSelector((state) => state.userData); // where userData is the key name given in the combineReducers.
const userId = userData.userId;
return (
<div>
<h3>User id is {userId}</h3>
</div>
);
};
5. useDispatch
- Used to dispatch the actions that will inturn modify the state data accordingly.
const App = () => {
const dispatch = useDispatch();
const updateUserId = (ev) => {
dispatch(setUserId(ev.target.value)); // action creator
dispatch({type: "SET_USER_ID", payload: ev.target.value}); // regular dispatch
};
return (
<div>
<input type="text" value={userId} onChange={updateUserId} />
</div>
);
};
Steps:
1. Declare the action type constants.
~/src/state/actionTypes.js
const actionTypes = {
user: {
SET_NEW_USER: "SET_NEW_USER",
SET_USER_ID: "SET_USER_ID"
},
counter: {
INCREASE_COUNT: "INCREASE_COUNT",
},
};
export default actionTypes;
2. Declare the reducers.
~/src/state/reducers/counterReducer.js
import actionTypes from "../actionTypes";
const counterReducer = (state = 0, action = {}) => {
switch (action.type) {
case actionTypes.counter.INCREASE_COUNT:
return state + action.payload.count;
default:
return state;
}
};
export default counterReducer;
~/src/state/reducers/userReducer.js
import actionTypes from "../actionTypes";
const userReducer = (state = { userId: 1, userData: {} }, action = {}) => {
switch (action.type) {
case actionTypes.user.SET_NEW_USER:
return {
...state,
userData: { ...action.payload },
};
case actionTypes.user.SET_USER_ID:
return {
...state,
userId: action.payload,
};
default:
return state;
}
};
export default userReducer;
3. Combine the reducers.
~/src/state/reducers/index.js
import { combineReducers } from "redux";
import userReducer from "./userReducer";
import counterReducer from "./counterReducer";
const reducer = combineReducers({
userData: userReducer,
countData: counterReducer,
});
export default reducer;
4. Create the store by passing the combined reducer and the middlewares if any.
~/src/state/store.js
// import { createStore, applyMiddleware } from "redux";
// import thunk from "redux-thunk";
import { configureStore } from "@reduxjs/toolkit";
import reducer from "./reducers/index";
// createStore is deprecated..
// const store = createStore(reducer, applyMiddleware(thunk));
const store = configureStore({
reducer,
middleware: (getDefaultMiddleware) => getDefaultMiddleware(),
});
// To add additional middlewares,
// middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(middleware1, middleware2, etc...), // thunk is inbuilt in @reduxjs/toolkit
export default store;
5. Declare the actions as per requirment for the features.
~/src/state/actions/counterActions.js
import actionTypes from "../actionTypes";
const increaseCount = (countToIncrease) => {
return {
type: actionTypes.counter.INCREASE_COUNT,
payload: { count: countToIncrease },
};
};
export { increaseCount };
~/src/state/actions/userActions.js
import axios from "axios";
import actionTypes from "../actionTypes";
const getUser = (userId) => {
return async (dispatchMethod, getState) => {
const userResponse = await axios.get(`https://jsonplaceholder.typicode.com/users/${userId}`);
const userData = await userResponse.data;
dispatchMethod({ type: actionTypes.user.SET_NEW_USER, payload: userData });
return userData;
};
};
const setUserId = (userId) => {
return {
type: actionTypes.user.SET_USER_ID,
payload: userId,
};
};
export { getUser, setUserId };
6. Implement the features and dispatch the actions as required.
~/src/components/counter/Counter.js
import { useSelector, useDispatch } from "react-redux";
import { increaseCount } from "./../../state/actions/counterActions";
const Counter = () => {
const counterData = useSelector((state) => state.counterData);
const dispatch = useDispatch();
const handleIncreaseCount = (count = 1) => {
dispatch(increaseCount(count));
};
return (
<div>
<h2>Counter</h2>
<h3>{counterData}</h3>
<button
onClick={() => {
handleIncreaseCount(1);
}}
style={{ marginRight: "10px" }}
>
Increase count by 1
</button>
<button
onClick={() => {
handleIncreaseCount(5);
}}
>
Increase count by 5
</button>
</div>
);
};
export default Counter;
~/src/App.js
import { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { getUser, setUserId } from "./state/actions/userActions";
import Profile from "./components/user/Profile";
import Counter from "./components/counter/Counter";
const App = () => {
const userData = useSelector((state) => state.userData);
const userId = userData.userId;
const [showLoader, setShowLoader] = useState(false);
const dispatch = useDispatch();
const getUserInfo = () => {
setShowLoader(true);
dispatch(getUser(userId))
.then((res) => {
console.log(res);
})
.catch((err) => {
console.log(err);
})
.finally(() => {
setShowLoader(false);
});
};
const updateUserId = (ev) => {
dispatch(setUserId(ev.target.value));
};
return (
<div>
<input type="text" value={userId} onChange={updateUserId} />
<h3>User id is {userId}</h3>
<button onClick={getUserInfo}>Get user info</button>
<br />
{showLoader ? "loading..." : <Profile></Profile>}
<hr />
<Counter></Counter>
</div>
);
};
export default App;
7. Wrap the whole application with the provider and pass the store as a prop.
~/src/index.js
import ReactDOM from "react-dom";
import App from "./App";
import { Provider } from "react-redux";
import store from "./state/store";
ReactDOM.render(
<Provider store={store}>
<App></App>
</Provider>,
document.getElementById("root")
);
Persisting redux state on refresh
- This requires changes in the following two files,
-
~/src/state/store.js -
~/src/index.js
Steps:
1. npm i redux-persist
2. ~/src/state/store.js
// NEW LINES START
import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";
// Setup persist config and persist reducer
const persistConfig = {
key: "persisted_state_data",
storage,
};
const persistedReducer = persistReducer(persistConfig, reducer);
// NEW LINES END
// UPDATED LINE START
// Pass this persisted reducer to the store configurator and disable the serializableCheck.
const store = configureStore({
reducer: persistedReducer,
middleware: (getDefaultMiddleware) => getDefaultMiddleware({
serializableCheck: false,
}),
});
// UPDATED LINE END
// NEW LINE START
// Create a persisted store along with the normal store and export both.
const persistor = persistStore(store);
// NEW LINE END
// UPDATED LINE START
export { persistor, store };
// UPDATED LINE END
3. ~/src/index.js
// Import persisted store and the regular store.
import { persistor, store } from "./state/store";
import { PersistGate } from "redux-persist/integration/react";
// Within the redux provider wrap the app with the PersistGate component and pass the persistStore.
ReactDOM.render(
<Provider store={store}>
<PersistGate persistor={persistor}>
<App></App>
</PersistGate>
</Provider>,
document.getElementById("root")
);
Repo link: Github
P.S.
- First post 🙏
- Hopefully it saves someone a few hours of R&D.
Top comments (0)