/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

1 vote204 views2 answers
Alerts in material ui
TypeScript
2 votes266 views1 answer
Style mat-dialog-container
TypeScript
0 vote233 views1 answer
HashMap.put("name", fruits Names[i]);
TypeScript
0 vote202 views1 answer
Finding diagonal elements in matlab
TypeScript
1 vote219 views1 answer
Custom decorator in loopback4
TypeScript
0 vote209 views3 answers
How to compare two lists element by element in python and return matched element
TypeScript
38 votes247 views2 answers
Npm ng.ps1 cannot be loaded because running scripts is disabled on this system grepper
TypeScript
0 vote204 views1 answer
Angular 8 TS2307: Cannot find module '@angular/cdk/clipboard'.
TypeScript
0 vote221 views1 answer
// running tests Your code should no longer have a p tag around the text asking what level ninja a user is. // tests completed category:423
TypeScript
0 vote220 views2 answers
Django query to return User whose first name starts with j or last name starts with h
TypeScript