在调度操作之前调用 API - Redux Toolkit

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

这里最惯用的答案是 hand-write 启动异步请求然后分派普通操作的 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 以及如何编写它们的详细信息。

在调度操作之前调用 API - Redux Toolkit

Call API before dispatching action - Redux Toolkit

javascript

reactjs

redux

redux-toolkit