React Redux tutorial for beginners

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.

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.

REDUX store file

An example of a counter management system with React-Redux.

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.

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.

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.