派遣行动前致电 API - Redux 工具包

Question

我对此有点矛盾，似乎找不到答案。 我有一些动作。 我想要做的是在不等待结果的情况下发出请求（这是一个 firebase 调用，应该乐观地处理）。

那么我应该如何围绕这种情况构建我的代码？ 不应考虑使用createAsyncThunk ，因为我没有等待任何东西，也不需要更新任何本地requestStatus变量。

这就是我现在所拥有的：

// Component.js (where I do the dispatch)

useEffect(() => dispatch(updateCheckIn(payload)), [])

// CheckInActions.js

import { updateCheckInInDb } from "../../api/checkin"
import { updateCheckInAction } from "../reducers"

export const updateCheckIn = (update) => {
  updateCheckInInDb(update) // make API call
  return updateCheckInAction(update) // return actual reducer action
}

// CheckInReducer.js

const checkInSlice = createSlice({
  name: "checkIn",
  initialState: INITIAL_STATE,
  reducers: {
    updateCheckInAction(state, action) {
      return updateStateViaUpdateApi(state.data, action)
    },
  },
})

export const { updateCheckInAction } = checkInSlice.actions
export default checkInSlice

这行得通，但我觉得有点尴尬（特别是命名）。 我需要调用一个updateCheckInAction和另一个updateCheckIn 。 我对 redux 工具包有点陌生。 难道没有更优雅的方法吗？

Answer 1

这里最惯用的答案是手写一个 thunk 来启动异步请求，然后分派普通操作：

export const updateCheckIn = (update) => {
  return (dispatch) => {
    // make API call
    updateCheckInInDb(update) 
    // dispatch actual action to update state
    dispatch(updateCheckInAction(update)) 
  }
}

// used as
dispatch(updateCheckIn(123))

请参阅https://redux.js.org/usage/writing-logic-thunks以了解有关什么是 thunk 以及如何编写它们的详细信息。