Get started with Redux

Table of contents

No heading

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 using state and gets data from customers i.e Components by using action

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

Β