Rajesh JoshiReact Redux is the official React binding for Redux. It allows React components to read data from a Redux Store, and dispatch Actions to the Store to update data.
Redux helps apps to scale by providing a sensible way to manage state through a unidirectional data flow model. React Redux is conceptually simple. It subscribes to the Redux store, checks to see if the data which your component wants have changed, and re-renders your component.
Let's Code a simple Counter App 🚀
Create new React App
$ npx create-react-app learn-redux
Add Redux and Redux Toolkit
$ yarn add @reduxjs/toolkit react-redux
Redux Toolkit is official, opinionated, batteries-included toolset for efficient Redux development. It includes the most widely used Redux addons, like Redux Thunk for async logic and Reselect for writing selector functions, so that you can use them right away.
Directory Structure
src
│ App.js
│ index.js
│
└───redux
│ │ store.js
│ │
│ └───counter
│ │ counterSlice.js
Create a Redux Store
in the file src/redux/store.js
import { configureStore } from "@reduxjs/toolkit";
export default configureStore({
reducer: {},
});
Provide the Redux Store to React
in the file src/index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import store from "./redux/store";
import { Provider } from "react-redux";
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root")
);
Create a Redux State Slice for Counter
in the file src/store/counter/counterSlice.js
import { createSlice } from "@reduxjs/toolkit";
export const counterSlice = createSlice({
name: "counter",
initialState: {
value: 0,
},
reducers: {
setCounter: (state, action) => {
state.value = action.payload;
},
},
});
// Action creators are generated for each case reducer function
export const { setCounter } = counterSlice.actions;
export default counterSlice.reducer;
Add Slice Reducers to the Store
in the file src/redux/store.js
import { configureStore } from "@reduxjs/toolkit";
import counter from "./counter/counterSlice";
export default configureStore({
reducer: {
counter,
},
});
Write
App.js
export default function App() {
return (
<div>
<button aria-label="Increment value">Increment</button>
<span>#</span>
<button aria-label="Decrement value">Decrement</button>
</div>
);
}
Import requirements
import { useSelector, useDispatch } from "react-redux";
import { setCounter } from "./redux/counter/counterSlice";
useSelector will be used to fetch data from the global store
useDispatch will be used to update the data in the global store
Create
Countervariable and insialize the dispatch
const counter = useSelector((state) => state.counter);
const dispatch = useDispatch();
Accessing the counter value
Update the span tag accordingly.
<span>#{counter.value}</span>
Writing on Click Events
- Increment Button
<button
aria-label="Increment value"
onClick={() => dispatch(setCounter(counter.value + 1))}
>
Increment
</button>
- Decrement Button
<button
aria-label="Decrement value"
onClick={() => dispatch(setCounter(counter.value - 1))}
>
Decrement
</button>
App.js looks like this
import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { setCounter } from "./redux/counter/counterSlice";
export default function App() {
const counter = useSelector((state) => state.counter);
const dispatch = useDispatch();
return (
<div>
<button
aria-label="Increment value"
onClick={() => dispatch(setCounter(counter.value + 1))}
>
Increment
</button>
<span>{counter.value}</span>
<button
aria-label="Decrement value"
onClick={() => dispatch(setCounter(counter.value - 1))}
>
Decrement
</button>
</div>
);
}
Run the development Server 🚀
$ yarn start
And, if you hit and of the counter buttons, you'll see the updated values of the counter in the UI.
Hurray! You just learned What's new is React Redux.
I hope, you guys liked this quick tutorial. If so, then please don't forget to drop a Like ❤️
And also, help me reach 1k Subscribers 🤩, on my YouTube channel.
Happy Coding! 😃💻
