Quick Contact


    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’
    		};
    		};
    	

    Copyright 1999- Ducat Creative, All rights reserved.