/TypeScript/Createasyncthunk with typescript

Createasyncthunk with typescript

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

const fetchUserById = createAsyncThunk(
  'users/fetchByIdStatus',
  async (userId, { getState, requestId }) => {
    const { currentRequestId, loading } = getState().users
    if (loading !== 'pending' || requestId !== currentRequestId) {
      return
    }
    const response = await userAPI.fetchById(userId)
    return response.data
  }
)

const usersSlice = createSlice({
  name: 'users',
  initialState: {
    entities: [],
    loading: 'idle',
    currentRequestId: undefined,
    error: null,
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUserById.pending, (state, action) => {
        if (state.loading === 'idle') {
          state.loading = 'pending'
          state.currentRequestId = action.meta.requestId
        }
      })
      .addCase(fetchUserById.fulfilled, (state, action) => {
        const { requestId } = action.meta
        if (
          state.loading === 'pending' &&
          state.currentRequestId === requestId
        ) {
          state.loading = 'idle'
          state.entities.push(action.payload)
          state.currentRequestId = undefined
        }
      })
      .addCase(fetchUserById.rejected, (state, action) => {
        const { requestId } = action.meta
        if (
          state.loading === 'pending' &&
          state.currentRequestId === requestId
        ) {
          state.loading = 'idle'
          state.error = action.error
          state.currentRequestId = undefined
        }
      })
  },
})

const UsersComponent = () => {
  const { entities, loading, error } = useSelector((state) => state.users)
  const dispatch = useDispatch()

  const fetchOneUser = async (userId) => {
    try {
      const user = await dispatch(fetchUserById(userId)).unwrap()
      showToast('success', `Fetched ${user.name}`)
    } catch (err) {
      showToast('error', `Fetch failed: ${err.message}`)
    }
  }

  // render UI here
}

Source: redux-toolkit.js.org

Similar codes

0 vote305 views1 answer
Execution failed for task ':app:lint'. > Lint infrastructure error
TypeScript
0 vote320 views1 answer
How to compra vales on lists python
TypeScript
1 vote311 views1 answer
Swc entered unreachable code: export default from 'foo'
TypeScript
0 vote331 views1 answer
Angular 8 TS2307: Cannot find module '@angular/cdk/clipboard'.
TypeScript
0 vote327 views2 answers
_swapbatch.foreach multiple statements c#
TypeScript
1 vote316 views2 answers
Subplots in seaborn python
TypeScript
1 vote323 views1 answer
Angular reload component on route param change
TypeScript
6 votes344 views3 answers
Scroll to top angular
TypeScript
0 vote295 views1 answer
Extends multiple class typescript
TypeScript
0 vote301 views1 answer
Npm run scripts does not work
TypeScript