反应：在导航离开之前等待 useReducer 调度

Question

我有一个在onClick 处理程序中调用的函数。 它保存数据，然后使用例如导航离开。反应路由器：

async function saveAndExit() {
  await dispatchSave(data);
  navigateAway();
}

问题是dispatchSave 不能轻易等待：

// react hooks useReducer
const [state, dispatch] = useReducer(reducer, initialState)

// problem: dispatch doesn't return a promise
function dispatchSave(data) {
  dispatch({ type: 'save', payload: data })
})

使用dispatch 时处理此问题的正确方法是什么？

Answer 1

你可以使用传统的回调

function dispatchSave(data, callback) {
  dispatch({ type: 'save', payload: {data, callback} })
})

然后

async function saveAndExit() {
  dispatchSave(data, navigateAway);
}

在你的中间件（Saga/Thunk）中，保存操作完成后，可以同步调用payload.callback()。