使用 redux thunk 的动作创建者和普通的异步函数之间的区别

Question

So I want to understand beyond the basics of Redux thunk and I made two action creators, one of which works and uses redux thunk and other which only uses async but breaks.Below is the screenshot:

So in both action creators I await for the API request to finish and then return an action ( a JS object with type and payload).

However only the top one works and the bottom one gives an error saying action must be plain object although I return a plain object with 2 properties. I've been really struggling to understand why does the second action creator brakes and would be really nice if someone could explain in details why is it happening.Thank you!

Answer 1

It is because, when you use thunk, you return either an object or function. In 2nd case, when you dispatched your actions something like this dispatch(fetchUser()) , it didn't return any thing because you are calling an async method. Now code below await will only be executed once async all is done, original call of dispatch(fetchUser()) is already completed (hint : Only code below await is not executed, but the function call is already over), and fetchUser() didn't return any object, but in first case, you are actually returning a function which is calling an async method. This is where the magic of thunk middleware really happens. It executes that function and dispatch an action (hint: you are returning a function which is taking dispatch as an argument) which is executed by thunk. Hope this clears your doubt. I would suggest you to read how async/await really works (hint : event loops/single threaded).

Answer 2

You cant use an async function because it will always returns a promise. Even if you return a value it will be wrapped in a promise and it is returned. If you dont return anything in async function and try to read the value , then undefined will be wrapped in a promise . As redux says action creators should return a plain object which cannot be done directly using async functions.