Using Redux Toolkit’s createAsyncThunk | Advanced React Native | React Native tutorial
While a Redux store possesses great state management features, it has no clue how to deal with asynchronous logic. Redux eschews handling asynchronous logic simply because it doesn’t know what you want to do with the data you fetched, let alone if it’s ever fetched — hello, errors. 🙂
Middleware has since been used in Redux applications to perform asynchronous tasks, with Redux Thunk’s middleware being the most popular package. A middleware is designed to enable developers to write logic that has side effects — which refers to any external interaction outside an existing client application, like fetching data from an API.
With Redux Toolkit, Redux Thunk is included by default, allowing createAsyncThunk to perform delayed, asynchronous logic before sending the processed result to the reducers.
According to the official docs: createAsyncThunk is a function that accepts a Redux action type string and a callback function that should return a promise. It generates promise lifecycle action types based on the action type prefix that you pass in, and returns a thunk action creator that will run the promise callback and dispatch the lifecycle actions based on the returned promise.
Within createSlice, synchronous requests made to the store are handled in the reducers object while extraReducers handles asynchronous requests, which is our main focus.
Asynchronous requests created with createAsyncThunk accept three parameters: an action type string, a callback function (referred to as a payloadCreator), and an options object.
#jasacadamy #reactnativecourse #reactnativetutorial #react
createslice,thunk,create-react-app,redux toolkit thunk,react redux toolkit,createentityadapter,usestate,configurestore,redux with redux toolkit,react redux toolkit course,react,state,redux toolkit project,normalizing the state,redux toolkit vs redux,redux and redux toolkit,redux toolkit 2020,redux toolkit 2021,javascript,ecmascript,redux toolkit react,programming,code alongs,normalizing,redux toolkit example,monsterlessons academy,redux vs redux toolkit,redux toolkit async thunk,redux toolkit thunk,redux toolkit react,redux toolkit middleware,redux toolkit,redux toolkit axios,redux thunk,react redux middleware thunk,async redux toolkit,redux async actions,async thunk,async thunks,async thunk tutorial,react redux thunk middleware,middleware thunk,redux middleware,redux axios,createslice,redux actions,redux tutorial,create-react-app,createentityadapter,thunk,reactjs,react.js,usestate,normalizing the state,async redux toolkit,react redux toolkit,react redux toolkit course,redux toolkit,reducx toolkit,reduxjs toolkit,async thunk tutorial,redux toolkit api,redux toolkit 2020,redux toolkit 2021,redux toolkit thunk,redux toolkit axios,redux toolkit react,react redux tutorial,async thunk,react redux,redux toolkit example,redux toolkit project,redux vs redux toolkit,async thunks,redux toolkit vs redux,redux toolkit tutorial,react redux thunk middleware,redux vs redux toolkit,react redux toolkit tutorial,redux toolkit,redux toolkit react,redux toolkit intro,learn redux toolkit,redux toolkit example,redux toolkit tutorial,redux toolkit for beginners,redux intro,redux toolkit example project,redux toolkit beginners tutorial,redux state management,redux crash course,redux tutorial,redux beginners,redux react,react redux tutorial,redux js,react redux beginners,redux,react state management,react redux
1:00 introduction
08:00 Redux toolkit store creation
12:05 Redux slice creation
13:21 createAsyncThunk in Redux-Toolkit
19:21 builder addCase createAsyncThunk in Redux-Toolkit
23:13 Dispatching action
