Question

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

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

但我不知道我应该在哪里触发api调用来加载下拉项目。当我点击＆＃34;登录＆＃34;将触发身份验证操作。在此操作中，我执行身份验证并将一个布尔值返回给reducer。然后状态＆＃34;认证＆＃34;切换到＆＃34; true＆＃34;并且他将显示下拉列表。现在应该向用户显示下拉项目。

但是当我加载它们的时候？

我的想法是把'＃34;加载下拉项目＆＃34;逻辑到减速器，所以我可以等待'＃34;认证＆＃34;行动。但逻辑应该在行动中实施，是吗？

你有什么想法我能做什么？

Answer 1

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

您可以阅读有关需求的更多信息并使用thunks 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)); 
  }
}

Answer 2

我认为您应该在用户输入凭据时从后端处理此问题。如果用户通过身份验证，则使用经过身份验证的用户的下拉项发送“true”响应。

从前端用户可以使用redux thunk处理此操作。 Redux thunk是一个帮助你恢复功能的中间件。

在componentDidMount中，拨打this.props.actions.authAsync()

function authAction() {
  return {
    type: 'AUTH_SUCCESS'
  };
}

function authAsync() {
  return dispatch => {
    // api call
    // based on response show dropdown items
    if(response.data.authenticated){
     // return dropdown items from response
    }
    dispatch(authAction());
  };
}

登录后，React JS Redux加载数据

2 个答案: