/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 vote255 views1 answer
Contents links python jupyter
TypeScript
0 vote222 views1 answer
Add multiple constraints in create table sql
TypeScript
0 vote260 views1 answer
Jest not toBe
TypeScript
3 votes220 views2 answers
Select elements id like jquery
TypeScript
1 vote258 views1 answer
The Angular CLI process did not start listening for requests within the timeout period of 0 seconds.
TypeScript
1 vote223 views1 answer
How to make a button that alerts when clicked with html
TypeScript
0 vote225 views1 answer
Mac mini late 2010
TypeScript
0 vote278 views1 answer
Sql concepts interview questions
TypeScript
1 vote220 views1 answer
Json to object typescript
TypeScript
0 vote228 views2 answers
Property 'of' does not exist on type 'typeof Observable'.
TypeScript