Table of contents
No headings in the article.
What is Redux ?
let's head over to the documentation:
Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time-traveling debugger. You can use Redux together with React, or with any other view library.
so ! let's get started with redux and I also provide the day-to-day life example for your better understanding π
so here first we want to install RTK, so lemme explain what is RTK?
Redux Toolkit is a set of tools that help simplify Redux development. It includes utilities for creating and managing Redux stores, as well as for writing Redux actions and reducers. The Redux team recommends using Redux Toolkit anytime you need to use Redux.
to install RTK, write the below script in your terminal
npm install @reduxjs/toolkit
npm install react-redux
so here is an example, redux is like a restaurant that is open in your city !π
create store folder
in your react-app and in the store folder create slice.js
import { createSlice } from "@reduxjs/toolkit";
const slice = createSlice({
name:"manager",
initialState:{deliveryCharge:0},
reducers:{
calculateDeliveryCharge(state,action){
// calculation.....
},
vegDeliveryEmployee(state,action){
const Dc = state.deliveryCharge;
const address = action.payload;
// calculations.....
},
dessertDeliveryEmployee(state,action){
// calculations////
}
}
})
export const sliceActions = slice.actions
export default slice.reducer
here !
createSlice
function is like a Manager hired for delivery management, which has data of all activities done by employees i.e. reducers, In an initial state, it stores all data of restaurant for example delivery charges for home delivery, and here manager hired different employees for the different task! each employee gets data from initial state by usingstate
and gets data from customers i.e Components by usingaction
And In documentation terms! A createSlice
function that accepts an initial state, an object of reducer functions, and a "slice name", and automatically generates action creators and action types that correspond to the reducers and state.
Next step:- create index.js
as your main file in the store folder
import { configureStore } from "@reduxjs/toolkit";
import sliceReducer from "./slice";
export const store = configureStore({ reducer: sliceReducer });
here π
configureStore
is like an owner of a restaurant that stores all reducers
or may say !configureStore() accepts a single configuration object parameter. The input object should have a reducer property that defines either a function to be used as the root reducer, or an object of slice reducers that will be combined to create a root reducer.
and here's the final setup in index.js
which is the main file of your react-app
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { Provider } from "react-redux";
import { store } from "./store";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>
);
here you provide service of your restaurant by adding
Provider
wrapping around your<App
component which is like the city where you provided the servicesπ
Now Comes to the last step in App.js
import { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { sliceActions } from "./store/slice";
function App() {
const [address, setAddress] = useState("");
const dispatch = useDispatch();
dispatch(sliceActions.vegDeliveryEmployee(address));
dispatch(sliceActions.calculateDeliveryCharge());
const charges = useSelector((state) => state.sliceReducer.deliveryCharge);
return (
<div className="App">
<label>write your address here !</label>
<input onChange={(event) => setAddress(event.target.value)}></input>
<div>
<h1>total amount</h1>
<p>{charges}</p>
</div>
</div>
);
}
export default App;
what is useSelector ?
If you want to retrieve multiple values from the store, you can: Call useSelector() multiple times, with each call returning a single field value. Use Reselect or a similar library to create a memoized selector that returns multiple values in one object, but only returns a new object when one of the values has changed
what is dispatch ?
const dispatch = useDispatch() This hook returns a reference to the dispatch function from the Redux store. You may use it to dispatch actions as needed. You call the store. dispatch to dispatch an action. This is the only way to trigger a state change.
or in simple terms! we use useSelector to get data from our store and useDispatch to perform other actions by giving data to store
That's it! as simple as that! π Hope you enjoyed reading about the Redux store. Thanks for staying up here with me. See you in the next blog ππ. See you soon! Until then