如何将createSyncthunk与打字稿使用？如何为``待处理''和`拒绝的有效载荷设置类型？

Question

我想将其转换为

createAsyncThunk

调用，假设它将减少代码。但是会吗？

在

https：//redux-toolkit.js.org/api/createasyncthunk

上从示例中

const uploadThumbnail = createAsyncThunk(
  'mySlice/uploadThumbnail',
  async (file: File, thunkAPI) => {
    const response = await uploadAPI.upload(file) as API_RESPONSE
    return response.data   // IS THIS THE payload FOR THE fulfilled ACTION ?
  }
)

这就是我如何处理生命周期行动？

const usersSlice = createSlice({
  name: 'mySlice',
  initialState: // SOME INITIAL STATE,
  reducers: {
    // standard reducer logic, with auto-generated action types per reducer
  },
  extraReducers: {
    // Add reducers for additional action types here, and handle loading state as needed
    [uploadThumbnail.pending]: (state,action) => {
       // HANDLE MY UPLOAD_START ACTION
    },
    [uploadThumbnail.fulfilled]: (state, action) => {
      // HANDLE MY UPLOAD_SUCCESS ACTION
    },
    [uploadThumbnail.rejected]: (state, action) => {
      // HANDLE MY UPLOAD_FAILURE ACTION
    },
  }
})

问题
我假设

createAsyncThunk

异步处理程序的返回是

payload

动作，是对吗？

但是如何为

fulfilled和payload

动作设置

pending

类型？我应该在

rejected

处理程序中添加一个

try-catch

块吗？

这是我应该做的相关性吗？

createAsyncThunk

pending === "UPLOAD_START"

fulfilled === "UPLOAD_SUCCESS"

OBS：
• 从我想象的模式来看，看起来我会写的代码要比我已经使用三个单独的操作并在常规还原器中处理它们的代码要少（而不是在我的常规还原器中处理它们

  rejected === "UPLOAD_FAILURE"

  道具）。在这种情况下，使用
extraReducers
• 的意义是什么？
您的大多数问题将通过查看您链接的文档页面中的一个打字稿示例之一来回答：

• createAsyncThunk

，从那里开始观察：

当使用Typescript时，您应该使用

export const updateUser = createAsyncThunk<
  User,
  { id: string } & Partial<User>,
  {
    rejectValue: ValidationErrors
  }
>('users/update', async (userData, { rejectWithValue }) => {
  try {
    const { id, ...fields } = userData
    const response = await userAPI.updateById<UpdateUserResponse>(id, fields)
    return response.data.user
  } catch (err) {
    let error: AxiosError<ValidationErrors> = err // cast the error for access
    if (!error.response) {
      throw err
    }
    // We got validation errors, let's return those so we can reference in our component and set form errors
    return rejectWithValue(error.response.data)
  }
})


const usersSlice = createSlice({
  name: 'users',
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    // The `builder` callback form is used here because it provides correctly typed reducers from the action creators
    builder.addCase(updateUser.fulfilled, (state, { payload }) => {
      state.entities[payload.id] = payload
    })
    builder.addCase(updateUser.rejected, (state, action) => {
      if (action.payload) {
        // Being that we passed in ValidationErrors to rejectType in `createAsyncThunk`, the payload will be available here.
        state.error = action.payload.errorMessage
      } else {
        state.error = action.error.message
      }
    })
  },
})

样式符号为ExuroveUcers使用，并且您的所有类型都将自动为您推断。您不需要手工键入任何内容 -  ever。
thunk的价值将是“满足”动作的

builder如果您

extraReducers

Answer 1

return

如果您只是

payload

，那将成为“被拒绝”动作的

return rejectWithResult(value)

。

aadditional答案：
• “待处理”是您的“ upload_start”。它没有有效载荷，您无法设置它。 所有“待处理”/“被拒绝”/“满足”的三个都将具有

  payload

  ，这是您传递给thunk呼叫的原始价值。
最终，这可能比您用手写的代码要少一些，并且在您的整个应用程序中将非常一致。另外，它会捕获一些否则会看不见的错误。 你知道那
• 吗 throw实际上包含一个错误？ 如果
error
• 触发了rerender（很可能是这样），并且在该rerender期间的某个地方是错误，则该错误将被捕获在此

  action.meta.arg

  块中，并且将派遣另一个错误。因此，您将同时拥有成功和错误案例的thunk。尴尬的。可以通过将结果存储在范围的变量中并在Try-Catch-Block之外进行调度来规避这一点，但是实际上是谁这样做的？ ） 正是这些小事

    const manualThunk = async (arg) => {
      dispatch(pendingAction())
      try {
        const result = await foo(arg)
        dispatch(successAction(result))
      } catch (e) {
        dispatch(errorAction(e))
      }
    }
  

  照顾您，这使它在我眼中值得。
• 我的方法是我的方法

  中src/store/reducer/api.ts

  successAction

  shice添加了被拒绝的案例
添加相应的动作

/store/reducer/reducer.ts

throw

• 没有将CreateSyncthunk的每个细节放置在同一文档页面下，有关打字用法的特定信息可以在使用Typescript
的情况下找到。特别是关于createSyncthunk函数，可以找到page
• 。