How to Start with React-Redux

This post is for React-Redux beginners, I have started building React-Redux application since Feb 2017, I found difficulty while getting into the actual development of scalable React-Redux application using express framework on top of Node.js.

We have started with React as front end and after reaching it to certain level code became complex to fix data issues.

I found Redux is the best choice for state management. Here we go,I will show you How I did.

1.Install Node Js.
2. Install create-react-app(npm install -g create-react-app)
3. Enter this command create-react-app awesome-app

It creates basic foundation for React app with basic dependency installed.

Let us add Redux to our application.

npm install redux
npm install react-redux

now dependencies are installed.

Now We will integrate Redux to our React App.

  1. Create a folder called Store.
    1.Add Actions folder (container for Application action.
    2.Add Reducers Folder (container for Reducer).
    3.Add store.js (its index for your whole store)
    4.(If your want use Redux-Saga you can create Saga folder)
This code will create Redux store
import required functions
  1. Create Store with help of createStore function from the redux library.
    Note: If you are using Redux saga you have to Add Enhanser.
  2. applyMiddleware is function adds middleware to our Redux store.
    Here I am using Thunk and Logger.
  3. Logger gives you Redux logs on your browser console.
Here are redux Logs.

4.Thunk middleware allows you to write action creators that return a function instead of an action. The Thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met

Reduce Example

5. Reducers are data stuctures. you can CRUD using Actions.(Above we have example to create Reducer and Import and this reducer in the store.

6. Add Actions in Action Folder. Each Action Function should return action and you can add data for the CRUD.

Loan Action.

7. Now it is all set to use Store on you Application.
8. Import Providers and Stores to you boot app.js

Added Store to Applicaton

9. Now you can use Store data anywhere in your appliction using connect.
10.Let us take an example, where we will add connect to our React class so that we can use Store data.

11.Using mapStatetoPros we can add our custom name to state.

12.connect provides store data as a Props to your react component.

Now you can use Store data as Props in your component.

Please ask your question below…Thanks