Welcome to a brand new series, where are going to learn about Redux and how to use it in React applications.
- You should know the fundamentals of React, before to start with Redux.
- Do, React Tutorial for Beginners on my YouTube channel or blog series on my site.
- It is a state container
- It is predictable
We will learn about these three points in details.
- Redux is not tied to React
Redux is a state container
- Redux stores the state of your application
- In a React app, we have state of individual components
- State of an app is the state represented by all the individual components of that app.
- Redux will store and manage the application state.
With a React-redux app, we will still continue to have local state in every component. But the states which are needed by many components, we will move them to Redux. You don’t have any restrictions in Redux, like parent to child passing of props. There is a global state and anyone can use it.
Suppose we have an app, which contains states variables like below. Now we will move them to Redux.
Redux is predictable
- In redux, all state transitions are explicit and it is possible to keep track of them.
- The changes to your application’s state become predictable.
Redux have a very good and somewhat complex mechanism to keep track of state and also to update them. There is a pattern and a lot of boiler code. But once we learn it, we can master it easily.
React-Redux is the official Redux UI binding library for React. We will learn more about it later on.
We can use Redux without React and will do so in the first part of the series. Create a folder Redux-Demo and open it with any terminal. Run the command
npm init — -yes in it. It will create an empty package.json with default settings for us.
Now, we will install redux in our project by running the command
npm install redux in terminal.
Now, open the folder in VS Code and create a file index.js inside it. Put a simple console log inside it.
Now, to check whether our simple node project is working fine, we will run
node index in the terminal.
We will continue with this in the next part. You can find part-2 here.