
Quick Contact
React Tutorial
- React JS Introduction
- How to install react?
- React Features
- React vs React Native
- React JS VUE Application
- State V/S Props
- React Props
- REACT STATE
- React JSX?
- Conditional Rendering
- React Constructor
- Props Validation
- React Component API
- React Forms
- React Event
- Flux v/s MVC
- React Flux Concept
- React Fragment
- React Lists and Keys
- Error Boundaries
- React Portals
- React Animation
- React Redux
- React CSS
- React Refs
- React Router
Questions & Answers
React Redux
You can make different API calls using redux. There are two packages which you need to install-
-
Axios-
This package is used to make request to an API end point.
-
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