使用 redux thunk 了解异步调度操作

Question

我刚刚浏览了在 reactjs 应用程序中分派 ACTIONS 的文件，基本上遇到了以下函数::-

// When app inits
export const init = () => async dispatch => {
  dispatch({ type: TYPES.SET_LOADING });
  await dispatch(getConfig());
  await dispatch(getGenres());
  dispatch({ type: TYPES.REMOVE_LOADING });
};

对于分派之前异步正在做什么，我有点困惑，我习惯于看到普通的香草 javascript 异步函数，如下所示：

anasyncfunc = async () => { 
   // write you're code here
}

但是上面的代码让我有点困惑。谁能给我解释一下。

Answer 1

使用 await 关键字的函数必须用您在示例中指出的 async 标记

anasyncfunc = async () => { 
   // write you're code here
}

在这个函数中我们现在可以使用 await 因为它被标记为 async。

在 thunk 的例子中，我们有效地创建了一个名为 init 的外部函数，当调用它时将 return 一个匿名函数。这个匿名函数将接受 dispatch 作为参数，并将使用 await 关键字，因此需要用 async 关键字标记。

简而言之，我们实际上只是在创建一个要使用 await 的函数，因此必须用 async 标记。

我希望这能说明问题。

使用 redux thunk 了解异步调度操作

Understanding async dispatch actions using redux thunk

async-await

reactjs

redux-thunk

react-redux