Redux thunk调用方得到响应

Question

我有一个由后端服务器管理的实体的Redux切片和thunk操作。我有"；创建"；Redux thunk执行的操作。当服务器收到带有实体详细信息的Create请求时，它会返回服务器生成的新ID。如何在调用者组件中获取该ID？

我的行动(使用Redux Toolkit编写(：

export const createTodoAction = createAsyncThunk(
"todos/CREATE",
async (todo: Todo) => {
const fullTodo = await createTodoApi(todo);
return fullTodo; // Contains the ID from the server
}
);

我的组件：

function CreateTodoForm() {
const dispatch = useDispatch();
const onFormSubmit = (form: Todo) => {
dispatch(createTodoAction(form));
// How can I get the ID here?
}
...
}

我的直观解决方案是直接从组件调用API，并将createTodoAction转换为常规的Redux操作(而不是thunk(。但我所有的其他操作都是用Redux-thunk编写的，所以一个操作必须直接从组件调用API似乎有点奇怪。

有什么方法可以从调用方组件中的thunk操作中获得响应吗？

Answer 1

使用createAsyncThunk创建的Thunks返回作为dispatch(thunk())的结果的最终调度操作。因此，您可以打开结果操作以获得有效载荷值：

function CreateTodoForm() {
const dispatch = useDispatch();
const onFormSubmit = async (form: Todo) => {
const resultAction = await dispatch(createTodoAction(form));
try {
const payload = unwrapResult(resultAction);
// do something with payload here
} catch (err) {
// call must have failed - can optionally handle error here
}
}
...
}