在Redux中传递参数给动作

Question

我正在使用redux工具包，(redux的新更新，如果你还在使用已弃用的旧版本)与React，我正在使用createAsyncThunk方法(或中间件，如果你喜欢)执行API调用到我的后端API。

在这里，我可以做两件事，要么在组件内运行异步调用，检查API调用是否成功或失败，并基于此呈现一些东西，或者我可以在动作创建器本身内执行异步API调用(在createSlice中，如果你使用Redux工具包)。

就我个人而言，我认为第二种方法对组件来说更抽象、更清晰，但主要问题是I无法处理那里的错误。换句话说，以这个例子为例，我想要getAllPosts，我可以简单地在组件中使用dispatch(getAllPosts())dispatch一个动作，并让异步逻辑和错误处理在动作创建者getAllPosts中。但是，在异步调用失败的情况下，我不能返回一个错误到组件，以呈现一个红色消息，说"有一个错误，而获取post "

我认为我可以将回调函数作为参数传递给getAllPosts动作创建者，并使此回调函数仅在失败的情况下运行。例:

dispatch(getAllPosts(payloadObj, ()=> { /* do something here in case of an error* / } ))

问题是:

• 你觉得我的解决方案怎么样?这是最好的还是有标准化的方法?
• 我如何传递回调函数参数我描述的getAllPosts方法?我可以简单地向getAllPosts方法添加第二个参数吗?或者这在redux-toolkit中是不可能的?我必须传递回调函数作为第一个参数吗?但是将它作为第一个参数将使redux-toolkit将其包装在payload属性中，因为假设我传递的是一个新状态。

Answer 1

这里的正确答案是遵循Redux Essentials Part 5: Async Logic - Checking Thunk Results in Components中的模式。

如果thunk函数返回一个promise，它将从dispatch(thatAsyncThunk())返回。

RTK的createAsyncThunk将返回一个带有特殊.unwrap()方法的promise，如果成功则返回结果，如果失败则抛出错误。

因此，在组件中正确的技术是:

const fetchPokemonByName = createAsyncThunk(
'fetchPokemonByName',
async (name) => {
const res = await imaginaryPokemonApi.getByName(name);
return res.data;
}
)
// later, in a component
function SomeComponent() {
const dispatch = useDispatch();
const handleClick = async () => {
try {
const pokemon = await dispatch(fetchPokemonByName("pikachu")).unwrap();
console.log("Entry: ", pokemon);
} catch (err) {
console.error("Failed to fetch pokemon: ", err);
}
}
}