Breaking News: Grepper is joining You.com. Read the official announcement!

create async thunk redux

Ahmed Tawfik answered on December 12, 2022 Popularity 10/10 Helpfulness 4/10

answer create async thunk redux

create async thunk redux

Comment

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
import { userAPI } from './userAPI'

// First, create the thunk
const fetchUserById = createAsyncThunk(
  'users/fetchByIdStatus',
  async (userId, thunkAPI) => {
    const response = await userAPI.fetchById(userId)
    return response.data
  }
)

// Then, handle actions in your reducers:
const usersSlice = createSlice({
  name: 'users',
  initialState: { entities: [], loading: 'idle' },
  reducers: {
    // standard reducer logic, with auto-generated action types per reducer
  },
  extraReducers: (builder) => {
    // Add reducers for additional action types here, and handle loading state as needed
    builder.addCase(fetchUserById.fulfilled, (state, action) => {
      // Add user to the state array
      state.entities.push(action.payload)
    })
  },
})

// Later, dispatch the thunk as needed in the app
dispatch(fetchUserById(123))

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: stackoverflow.com

Tags: javascript redux thunk

Link to this answer
Share Copy Link

Contributed on Dec 12 2022

Ahmed Tawfik

0 Answers Avg Quality 2/10

create async thunk redux

Contents

More Related Answers

create async thunk redux

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.