React with Redux tutorial for beginners

In this tutorial, we will learn and practice react with a redux tutorial for beginners with lots of examples. I have written a single article on redux with react in the react tutorial. And this tutorial is to deep dive into the concept to learn how redux can be used in react for state management.

You can find the complete source code in the GitHub source code for react with redux and how can you run the source code?

1. Clone the git source for react js
2. Checkout to the branch react-with-redux-tutorial
3. Run npm i
4. Run npm start

And we are dividing the tutorial with different chapters to practice it in a better way. Let’s start with what is a state in react and how redux can be used to manage the state to react. We are creating a login module in reactjs to understand the concept. And the react may need to render a particular screen into the browser-based on some conditions, like whether the customer is logged in or not. These conditions can be stored as attributes in the state object for example

const initialState = {
    isManagerLoggedin: false,
    employee:[],
};

What is the state?

1. A state is an inbuilt object, means it is a reserved key in the React JS.
2. The state holds the property value with the keys that belong to the components
3. The state is mutable and can be changed by the setState method
4. If the state is been changed it lead react to re-render DOM
5. The state is managed from inside a Component.
6. The state property is only available in Components that extend it
7. In the version, 16.8 new feature hooks have been introduced to manage state in functional Component

How react works?
React is a third party library and its not a part of reactjs. The redux works with the concept of the cental store which stores the application state. The react helps in controlling the flow data.
Let’s look at the core concepts of the redux library.

Actions :
Actions are payloads of information that send data from your application to your store. They are the only source of information for the store. You send them to the store using store.dispatch().

Reducers:
Reducers specify how the application’s state changes in response to actions sent to the store. Remember that actions only describe what happened, but don’t describe how the application’s state changes.

Store:
In the previous sections, we defined the actions that represent the facts about “what happened” and the reducers that update the state according to those actions.

The Store is the object that brings them together. The store has the following responsibilities:

1. Holds application state
2. Allows access to the state via getState()
3. Allows the state to be updated via dispatch(action)
4. Registers listeners via subscribe(listener)
5. Handles unregistering of listeners via the function returned by subscribing (listener).

Data Flow:
Redux architecture revolves around a strict unidirectional data flow. This means that all data in an application follows the same lifecycle pattern, making the logic of your app more predictable and easier to understand. It also encourages data normalization, so that you don’t end up with multiple, independent copies of the same data that are unaware of one another.

You will learn the redux with the following chapters

1. React with Redux tutorial
2. How to create store in redux
3. Create reducers in redux
4. Connect redux to react
5. mapStateToProps in react-redux
6. mapDispatchToProps in react-redux
7. Dispatch an action in react-redux