React-Redux

Before directly jumping to react-redux. It is crucial to be aware about React first. I will be very concise.

What is React

React is the front-end JavaScript library that is used to design and build web apps. Since it is the library, it means there are multiple packages/modules that are used to perform different tasks. Earlier it was mainly dealt in class component but since the introduction of "hooks" class based components nearly became obsolete.

Now for react hooks, they provide function based components instead of class based components.
In React we build components and then you integrate them to build a complete app. For Example, in a particular website- navbar, sidebar, search, footer etc. are different components. Hooks provide a way to store and reuse logic between states of the application.

Here is the basic structure of a react component.

import React from 'react';

function App() {
  return (
    <div>
      <h1>React, Redux and Redux-toolkit</h1>
    </div>
  );
}

export default App;

Most common hook in React is useState. This hook stores the state of the application and provide a method to change it. While building an application, sometimes number of states can reach to
overwhelming number. In that case, it can be very exhaustive to properly manage states. To solve this problem, we use Redux.

redux

First Redux is the state management library for any JavaScript application. Redux provides a centralized storage to store state for the application. It means, instead of creating state for every single component, we create states that are accessible to all the components of the application.

Before moving on to react-redux, there are few important terminologies that crucial to learn in redux.

store: As the name suggests, it is the centralized location to store and manage the states of the application. There are two important methods that are used in store. First one getState()is used to retrieve the current state of the application and second one dispatch(action)is used to initiate the state change.

Actions: are the JavaScript Object that signals the store to that state is needed to change. It describes the type and payload. payload can be considered as the data or argument that can be passed to the store.

Reducers: These are pure JavaScript functions that basically changes the state. These functions take actions and current state and then return the updated state. actions are the operations that are performed on the state.

Note: state in Redux are immutable i.e., they cannot be changed. Therefore reducers doesn't actually changes the state rather they create an updated copy of state.

react-redux

react-redux is the library that provides linkage between React and Redux.

Now let's try to understand redux with simple counter app.

There are few packages that we need to use redux in our react application.

npm i redux react-redux

Firstly we will create store, where we will store our states for the application. To keep example easy, I am writing reducer in the same file where we store our state.

store.js

import {createStore} from 'redux'

const reducerFxn=(state={counter:0},action)=>{
    if(action.type==="increase"){
        return {counter:state.counter+1}
    }
    if(action.type==="decrease"){
        return {counter:state.counter-1}
    }
    return state
}
const store =createStore(reducerFxn)
export default store;

In the above code segment, there is reducerFxn which takes current state and action as its input. Then according to action.type it returns new state with updated value. In this case there are increase and decrease action type. and in the last there is default return state.(specifically for initial render)

For the application, to access the store, wraps whole app in the <Provider> component.

index.js

import {React} from 'react'
import {ReactDOM} from 'react-dom/client'
import {App} from './App.jsx'
import './index.css'
import { Provider } from 'react-redux'
import {store} from './store/index.js'
ReactDOM.createRoot(document.getElementById('root')).render(
  <Provider store={store}>
  <React.StrictMode>
    <App />
  </React.StrictMode>
  </Provider>
);

We pass the store props so that each component inside <App/> can access the store. We import the store from store.js

At last, we will build our main application component.

app.js

import {useSelector,useDispatch} from 'react-redux'
function App{
  const counter=useSelector((state)=>state.counter)
  const dispatch=useDispatch()
  const increment=()=>{
    dispatch({type:'increase'})
  }
  const decrement=()=>{
    dispatch({type:'decrease'})
  }
  return (
    <div>
      <h1>Counter app</h1>
      <h2>{counter}</h2>
      <button onClick={increment}>increase</button>
      <button onClick={decrement}>decrease</button>
    </div>
  );
}
export default App;

useSelector hook is used to access the state from the store.
useDispatch hook is used to initiate or dispatch the action for the reducer(in this case reducerFxn).We cannot directly use dispatch hook so we have to initialize it.

Our Counter application is ready🥳🥳

I hope you get the basic gist of the 'redux' and 'react-redux'.

Here are some references that can be helpful-
react redux

You can connect with me here

Comments

[Kritika Singh]

easy to understand