Redux is all about state. So we must first understand what state is :

State is simply a Javascript object that holds information that will affect the rendering of the component it belongs to. 

Whenever we have an application where there are many components and we have multiple states to handle, then props drilling becomes complex. So in that case Redux comes into picture. 

You could think of Redux as a box.

1. This box organises the state in a single place.
2. You can ask the box what the current state is.
3. You can describe the changes in the state of the box. 

Thus we can say : 

Redux is probably the most popular global state management library for react so far. It lets us manage the application in a scalable manner. 

Key components of Redux?

1. STORE

The store brings everything together. It holds an applicationholds application state. 

2. ACTIONS

The actual action we want to take place, for example, “add product”.

In Redux, actions are plain JS objects, and they must have a type property(e.g. ADD_PRODUCTS)

3. REDUCERS

These specify how the application’s state should change in response to each action. For example, our new state should be one record higher with each new created record.

 Redux flow

Basic Notes Application Using REACT HOOKS and REDUX

Create a new react app using the below commands : 

Create store.js that contains the global state.

Import the provider from react-redux and wrap it around the parent component that wraps all the components 

Create a Reducers folder which will have two files :

1. Root reducer 
2. Notes reducer 

For rootReducer.js

For notesReducer.js

Now our major components store, action and reducers are set up. Now we will construct a basic keepers application for which state of notes will be handled by Redux.

The above code will help us to add notes which contain a text field to enter the notes and a button that will add the note in the redux store.

handleChange is called on button click. Here we have a useDispatch() function provided from “react-redux” that helps us to trigger the action we want. Here we have triggered the action “CREATE_NOTES” that would go to the reducer and will find the type and add the notes added in the initial state []. 

state, payload [] This is how we use Redux            //console.log

Next we will print the state we get from the Redux store for that we have useSelector() method from “react-redux”.

Note: The state.notes should be the same as mentioned in the root reducer.

References: 

https://medium.com/leanjs/introduction-to-redux-redux-explained-with-very-simple-examples-b39d7967ceb8

https://medium.com/@bretcameron/a-beginners-guide-to-redux-with-react-50309ae09a14

https://rossbulat.medium.com/redux-hooks-in-react-an-introduction-ffa8e1057fc2