React Redux tutorial for beginners
Tags: react, redux, javascript, tutorial
Published: 2022-02-25 07:54:07

## **What is REDUX?**

__Redux__ is a state management system which is used with many programming languages. In React, __Redux__ is used as a replacement for __CONTEXT API__.


## **The core principles of REDUX...**

**0. Single Source of truth:**
     Global state of the application is stored in a single place.

**1. State is read-only:**
     The only way to change the state is by emitting actions.

**2. Changes are made with pure functions:**
     The pure functions are known as REDUCERS which take two 
     arguments, one is previous state and the second is an action.
     Previous state is evaluated with the passed action and a new
     state is returned.

## **Creating store for React-Redux**

     createStore() function is used to create a store which is 
     imported from redux library and this function accepts a 
     reducer function.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z2jccckg15lgdqbkvymd.png)


# **Creating a reducer function**
    A reducer function is a normal function which accepts two 
    arguments, a previous state and an action payload. Based on 
    the evaluation of these two arguments, the reducer function
    returns a new state.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k1rjjmmhgyfx7ig2ypme.png)

# **REDUX store file**
   An example of a counter management system with React-Redux.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a1o5u5jgxtvrdow2w0s9.png)

# **Providing REDUX store to the root component**
    Provider component imported from "react-redux" library is used
    to provide the REDUX store to the root component. The Provider 
    component acts as a wrapper component and wraps the root 
    component of the application. The Provider component has a 
    "store" attribute to accept the REDUX store which establishes
    the connection between Provider and REDUX store.

    The child components of the root component are also exposed to
    the REDUX store when the Provider component wraps it.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3moft1j2we55flycbpgx.png)

# **Accessing state data from REDUX store**

    useSelector() hook imported from "react-redux" library is used
    to tap into the REDUX store to access state data.
    useSelector() does strict === reference equality checks.
    useSelector() can be called multiple times within a single 
    function component.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8u8sqkgzp3kbenkqwm7g.png)


# **Dispatching an action to the REDUX store**

    useDispatch() hook imported from "react-redux" library is used 
    to dispatch actions to the REDUX store.
    Behind the scenes when an action is dispatched, useSelector()
    does a reference comparison of the previous selector result
    value and current result value. If they are different, the 
    component is forced to re-render.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v3xnyr7164cisczq7cv2.png)