/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 vote167 views2 answers
Typescript list concat
TypeScript
0 vote150 views1 answer
Name all the elements of set Red. Use the proper set notation.
TypeScript
1 vote152 views1 answer
Find value in array ts
TypeScript
2 votes161 views2 answers
Validate email with domain in angular6
TypeScript
4 votes169 views2 answers
Ionic 3 alert css custom
TypeScript
0 vote158 views2 answers
Custom fonts vue
TypeScript
0 vote166 views1 answer
Dotcms elasticsearch query
TypeScript
1 vote152 views1 answer
Node redis new objects must be created at the root
TypeScript
0 vote149 views1 answer
Typescript number to hex string
TypeScript
2 votes146 views1 answer
How to call angular 8 form validation ngif
TypeScript