Redux Thunk Explained with Example | Doctor Booking React JS App | React JS | Day- 12

Опубликовано: 24 Февраль 2022
на канале: JAS ACADAMY

255

Redux Thunk is middleware that allows you to return functions, rather than just actions, within Redux. This allows for delayed actions, including working with promises.

One of the main use cases for this middleware is for handling actions that might not be synchronous, for example, using axios to send a GET request. Redux Thunk allows us to dispatch those actions asynchronously and resolve each promise that gets returned.

Once Redux Thunk has been installed and included in your project with applyMiddleware(thunk), you can start dispatching actions asynchronously.

In this React JS project, we'll be building a complete Doctor booking App using ReactJS.This Doctor booking App will have following features/learnings -

✅ App setup
✅ API setup
✅ UI creation using styled-components
✅ Debouncing implementation
✅ Component based development
✅ Responsive UI using Flex Concept
✅ API integration with axios
✅ Book consultation with video call
✅ Validation using Formik

React Redux is the official React UI bindings layer for Redux. It lets your React components read data from a Redux store, and dispatch actions to the store to update state.

Why Use React Redux?
Redux itself is a standalone library that can be used with any UI layer or framework, including React, Angular, Vue, Ember, and vanilla JS. Although Redux and React are commonly used together, they are independent of each other.

If you are using Redux with any kind of UI framework, you will normally use a "UI binding" library to tie Redux together with your UI framework, rather than directly interacting with the store from your UI code.

React Redux is the official Redux UI binding library for React. If you are using Redux and React together, you should also use React Redux to bind these two libraries

Reasons to Use React Redux

It is the Official Redux UI Bindings for React
While Redux can be used with any UI layer, it was originally designed and intended for use with React. There are UI binding layers for many other frameworks, but React Redux is maintained directly by the Redux team.

As the official Redux binding for React, React Redux is kept up-to-date with any API changes from either library, to ensure that your React components behave as expected. Its intended usage adopts the design principles of React - writing declarative components.

It Implements Performance Optimizations For You
React is generally fast, but by default any updates to a component will cause React to re-render all of the components inside that part of the component tree. This does require work, and if the data for a given component hasn't changed, then re-rendering is likely some wasted effort because the requested UI output would be the same.

If performance is a concern, the best way to improve performance is to skip unnecessary re-renders, so that components only re-render when their data has actually changed. React Redux implements many performance optimizations internally, so that your own component only re-renders when it actually needs to.

In addition, by connecting multiple components in your React component tree, you can ensure that each connected component only extracts the specific pieces of data from the store state that are needed by that component. This means that your own component will need to re-render less often, because most of the time those specific pieces of data haven't changed.

00:00 - Introduction

#redux tutorial,#react redux tutorial,r#eact tutorial,reactjs tutorial,tutorial,redux tutorial for beginners,javascript tutorial,react redux tutorial for beginners,redux,react tutorial for beginners,react redux firebase,react redux crash course,react redux,react
react hooks redux,react js redux,what is redux,three core concepts in redux,react redux,understanding redux,reactjs redux,three core concepts in react redux,redux,react redux explained,full redux tutorial,react redux crash course,what is redux in react js,react redux tutorial,redux store,redux state,redux example,three core concepts,reducers,redux tutorial,redux tutorial #2,react redux tutorial for beginners,reactjs redux tutorial for beginners
usereducer,react reducer,reducers in redux,usereducer hook,react reducer hook,reactjs usereducer,reducers in react redux,usereducer tutorial,react usereducer js,react js usereducer,use reducer react js,react redux,react usereducer hook,reactjs,react reducer function,learn react usereducer,reactjs redux,react beginner,react redux tutorial,reactjs tutorial,react js usereducer tutorial,react,learn usereducer in 20 minutes,react redux tutorial for beginners|
usereducer,usereducer hook,reactjs usereducer,react reducer,hooks usereducer,usereducer tutorial,react js usereducer,react usereducer js,use reducer react js,react usereducer hook,learn react usereducer,react reducer hook

#reduxlogger #reactjs #reactredux #reacttutorial #reactjsbeginners #jasacadamy