score:5
from user acemark on the reactjs subreddit:
fwiw, nothing about making async calls with redux changes with redux toolkit at the moment.
you'd still use an async middleware (typically redux-thunk), fetch data, and dispatch actions with the results.
the next version of redux toolkit will include a helper method called createasyncthunk that does some of the action dispatching for you, but it's still the same standard process.
so, in general, your slice file would have something like:
const usersslice = createslice({
name: "users",
initialstate: {
loading: 'idle',
users: []
},
reducers: {
usersloading(state, action) {
// use a "state machine" approach for loading state instead of booleans
if(state.loading === 'idle') {
state.loading = 'pending'
}
},
usersreceived(state, action) {
if(state.loading === 'pending') {
state.loading = 'idle'
state.users = action.payload
}
}
}
})
const {usersloading, usersreceived} = usersslice.actions;
const fetchusers = () => async dispatch => {
dispatch(usersloading());
const response = await usersapi.fetchall()
dispatch(usersreceived(response.data));
}
and then you'd do dispatch(fetchusers()) in your component somewhere.
hopefully that points you in the right direction!
Source: stackoverflow.com
Related Query
- How do I make an API call using createSlice
- How to make the API call and display it in React JS using React Table and Axios?
- How to await a setState call finishing when using useState hook that immediately needs that state to make an API call?
- How to make common API call function using fetch
- How to make aspecific API call from within a Line Chart class in ReactJS using react-chartjs-2?
- When using aws amplify on react to make an call to api gateway, how do i go about getting the statuscode as well?
- How to make an API call using onClick function to render a list of data in React?
- how to make api call from external file using axios and callbacks and pass param in react
- How do I make my parent component re-run an api call on page refresh using React Router?
- how do I make axios API call in a separate component / file?
- How to make a second API call based on the first response?
- How to properly make a GET call in React returning an observable (resembling the method in Angular and not using promises)?
- How to make synchronous API call request in react js
- How to make a multiple api call on submission of a form in react
- How to Pass an ID to API call using redux saga?
- How can I iterate over the list of URLs and make a call to the server using useSWR hook
- How to make API calls using React, Redux in TypeScript
- How to make direct api call to cloudinary with axios?
- How to call functions with API calls in an action using Redux-hooks useDispatch from component?
- How to make only one API request when using React SSR?
- React App Using the same function in two places but the API call is different. How do I force it to use the root everytime?
- How to make an API call on props change?
- How to set multiple states using one response from axios API call in React
- How to call API using react js
- How can I make an api call dynamic with react?
- Using Cron to make an API call every day on express server
- How to make an API call in React on state change?
- Make an API call on second render using React Hooks
- How to make http call onclick using stateless component in ReactJS?
- How to make api call in react function based view
More Query from same tag
- Problem with writing custom editor for React-Data-Grid
- setState doesn't set state properly when used in array map function (we aren't using hooks its old project)
- Office UI Fabric - How to apply css styles to existing components
- How to convert an HTML string to virtual DOM in React?
- Module Build Failed when mapping Radio Input
- How to fix JSON parse error: Unexpected indentifier "object" in React Native?
- Why my methods for React function components don't work
- How can I mock window.screen.width property?
- Typescript property as string, how do I get the interface
- Delete function in React js Functional Component
- Logic or design pattern help required - react
- CSS Specificity with CSS Module
- Recreating slider with gsap and react
- How to fix issue while passing ReactJS state data in post request using axios?
- google auth and firebase persistence
- addClass only once onClick ReactJS
- Cannot set defaultSize after dragging the resizer of the tomkp/react-split-pane
- XLSX to CSV file convert for API call
- Cannot get rid of Warning: React state update on unmounted component during tests RTL
- add active class to selected item react
- How to put constants in React components, wrapped in recompose
- React file upload how to show toast on upload success or failure
- How to wait firebase, fetch data and return array in method?
- React Mapbox component flickering when I type in the input box of a different component
- Using React with Sharepoint Online Part 1
- I cannot detach a firebase listener in React
- React - props is not defined
- Styled Component Conditionnals not working properly
- How to correctly set state in a loop in react functional component using useState
- How can I check multiple conditions inside of UseMemo()