/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 vote146 views1 answer
Discord.py rewrite on reaction
TypeScript
0 vote137 views1 answer
How can i add multiple arguments in discord,js
TypeScript
1 vote155 views4 answers
Ok
TypeScript
0 vote162 views1 answer
Run an applescript
TypeScript
1 vote143 views1 answer
Typescript add property if not exist, merge if it exists
TypeScript
0 vote143 views1 answer
On input inset - afetr 5 digits jquery
TypeScript
0 vote225 views1 answer
Paint effects will render natively in maya software and maya hardware 2.0 render. Command will enable paint effects to render in Arnold or ay third-party render:
TypeScript
1 vote166 views1 answer
Custom decorator in loopback4
TypeScript
0 vote146 views1 answer
How to find out the amount of ints in c++
TypeScript
0 vote138 views1 answer
Adding import of app routing module
TypeScript