Learn React and Redux

What is a react

React (also known as React.js or ReactJS) is a free and open-source front-end JavaScript library for building UI components. It is maintained by Facebook and a community of individual developers and companies

I wished I had some prior knowledge when I first started learning Redux. I felt stupid since I couldn’t understand the concepts of actions, action creators, and reducers. How about a middleware solution? You’ve got to be joking, right?

What is Redux?

Redux is a predictable state container designed to help you write JavaScript apps that behave consistently across client, server, and native environments and are easy to test.

While it’s mostly used as a state management tool with React, you can use it with any other JavaScript framework or library. It’s lightweight at 2KB (including dependencies), so you don’t have to worry about it making your application’s asset size bigger.

With Redux, the state of your application is kept in a store, and each component can access any state that it needs from this store.

So Now lets go and try out some coding to further understand this theory and concepts

Lets go step by step

First of all check your npm version and node version

If it not installed install it by using this link : https://nodejs.org/en/

Next Step

npx create-react-app todo-app

cd todo-app

code .

and it will open the project in vscode

Next Step

create a folder todo and create all the following components with their relevant style sheet

TodoList is the todo the main component that we will be displaying in the app.js

App.js

TodoList.js

TodoListItems.js

NewTodoForm.js

Next step is to install redux for React

npm install react-redux

and now lets make a store.js , actions.js , reducers.js for using redux and the package structure looks like this

Store.js

reducers.js

actions.js

Next there is a problem when we refresh the page the added todos will be lost here is the solution for it

use

npm install redux-persist

use this command to install redux persist which will save the session in local storage

Redux Persist is a library that allows saving a Redux store in the local storage of an application. In React Native terms, Asyncstorage is a key-value based, unencrypted, asynchronous storage system that is global and can be used as the local storage for the app

Usage of PersistGate which automatically provides a delay in rendering of the components until the state gets persisted along with the usage to show the loading component.

Now its set up redux dev tool which is used to see state and action (its some what like a advance console log)

and set this inside the store.js and it will work!😇

export const configureStore =() => createStore(

persistedReducer,

window.__REDUX_DEVTOOLS_EXTENSION__ &&

window.__REDUX_DEVTOOLS_EXTENSION__(),

);

To my mind, version controlled redux store should be used when:

1. you need to keep the history of your modification
2. you often change the form of your store and you have users in production
3. local storage of your users are important to be kept.

That’s all we have successfully covered react and redux basic todo application !!!!😁😁😁😁😁And that’s it! I hope you have found this tutorial helpful.

ill be sharing my github link for the source code : https://github.com/baasithshiyam/todo-application

You might face some difficulties along the way of building this project, don’t hesitate to ask! I would love to help you out and answer any question that might arise.

Thanks for reading, and happy coding!