React Redux tutorials for beginners- 1

Image for post
Image for post
Redux

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.

Redux is a predictable state container for JavaScript apps. — Official site. Three things to notice here -

  1. It is for JavaScript apps.
  2. It is a state container
  3. It is predictable

We will learn about these three points in details.

  • Redux is not tied to React
  • Can be used with React, Angular, Vue or even Vanilla JavaScript.
  • Redux is a library for JavaScript applications.
  • 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.

state ={
isLoggedIn: true,
userName: ‘Nabendu’,
profileUrl: ‘/home’,
onlineUsers: []
}
  • 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.

Image for post
Image for post
React-redux

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.

Image for post
Image for post
package.json

Now, we will install redux in our project by running the command npm install redux in terminal.

Image for post
Image for post
npm install redux

Now, open the folder in VS Code and create a file index.js inside it. Put a simple console log inside it.

Image for post
Image for post
index.js

Now, to check whether our simple node project is working fine, we will run node index in the terminal.

Image for post
Image for post
node index

We will continue with this in the next part. You can find part-2 here.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store