javascript - React JS Redux 登录后加载数据

Question

我正在使用react js和redux并使用jwt进行身份验证。

我有一个带有下拉菜单的导航栏。此下拉列表仅对经过身份验证的用户可见。下拉项是动态的，应在用户登录后从服务器加载。

但我不知道应该在哪里触发 api 调用来加载下拉项。 当我单击“登录”时，将触发身份验证操作。在此操作中，我进行身份验证并向 reducer 返回一个 bool 值。 然后状态“已验证”切换为“真”并且将显示他的下拉列表。 现在应该向用户显示下拉项。

但是我应该什么时候加载它们？

我的想法是将“加载下拉项”逻辑放入 reducer 中，以便我可以等待“经过身份验证”的操作。但逻辑应该在操作中实现，不是吗？

你知道我能做什么吗？

Answer 1

在 redux 中，一旦对用户进行了身份验证，您就可以使用 thunk 触发另一个 api 调用来获取用户信息并为其分派(dispatch)相应的操作。

您可以阅读更多有关需求和使用thunk的信息 here

export function  loginUser() {
  return async (dispatch, getState) => {
      let response = await login(credentials)
      //action creator to update boolean that user is logged in
      dispatch(loginSuccessful(response)) ;
      //action creator to trigger api to fetch drop down data
      dispatch(loadDropdownItems(response)); 
  }
}