React-Redux
Tags: webdev, javascript, react, redux
Published: 2023-07-07 10:20:27

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.

```jsx
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.

```jsx
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**

```jsx
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**

```jsx
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**

```jsx
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](https://react.dev/) [redux](https://redux.js.org/introduction/getting-started)

You can connect with me [here](https://siddharthamishra.netlify.app/)