React: React Redux

React Redux

You can make different API calls using redux. There are two packages which you need to install-

1. Axios-

   This package is used to make request to an API end point.

2. Redux-

   Thunk is another package to redux ecosystem. It is standard way to define asynchronous action creators in your application.

Redux-

Thunk library basically is a middleware you are applying in redux store.

Applying in Syntax as-:

		Const redux= require (‘redux’)
		Const createStore= redux.createStore
		Const applyMiddleware= redux.applyMiddleware
		And then pass ‘apply Middleware’ in Create Store method
		Const.store=creates store (reduce, applyMiddleware ())
		An argument that passed to middleware is “Thunk Middleware”. Before passing first define at top.
		Const thunk middleware= require (‘redux-thunk’).default
		Then pass it as argument
		Const.store=createStore(reducer, apply Middleware (thunk middleware))
	

Also make sure to import axios-:

		Const axios = require (‘axios’)
		Now define async action creator
		Const fetchusers = () => {
		Return function (dispatch) {
		Axios.get(‘url of json’).then (response => {
		//response data is array of users
		})
		.catch (error => {
		//error message is error description}
		)
		}
		}
		Before API calls we dispatch fetchusersrequest
		Dispatch (fetchusersrequest())
	

With success of users request the request response is stored in ID-:

		.then (response => {
		//response data is array of users
		Const users = response.data.map (user => user.id))
		Dispatch (fetchuserssuccess(users))
		})
		And on failure
		   .catch (error => {
		Dispatch (fetchusersfailure (error.message))
		})
		In end subscribe to store i.e.
		Store.subscribe(() => {console.log(store.getState())})
	

Then dispatch asynchronous action creator

Store.dispatch(fetchUsers)

Now open terminal and run command node.\asyncActions.js and you should be able to see logs.

REDUX EXAMPLE

Example is shown by creating two files that is app.js and index.js

APP.JS

		Import React from ‘react’;
		Import {useSelector, useDispatch} from ‘react-redux’;
		Import {increment, useDispatch} from ‘./actions’;
		Function App() {
		   Const counter = useSelector(state => state.counter);
		Const islogged = useSelector(state => state.islogged);
		Const dispatch = useDispatch ();
		Return
		  < div className=”App”>
		      < h1>Counter {counter}< /h1>
		< button onClick={() => dispatch (increment())}>+< /button>
		{islogged ? < h1>valuable information < /h1>: ‘’}
		< /div>
		);
		}
		Export default App;
	

Another file is index.js as-:

		Export const increment = () => {
		    Return {
		     Type: ‘INCREMENT’
		      };
		};
		 Export const decrement = () => {
		Return {
		         Type: ‘Decrement’
		};
		};
	

Apply now for Advanced React Js Course