Question

我想将我所有的服务器调用函数（HTTP GET，POST等）提取到一个辅助函数中。辅助函数将从不同的反应组件中调用。它将检查JWT令牌是否已过期（客户端），如果已过期，则将要求用户重新登录并获取新令牌，然后再将请求发送到服务器。

问题：当辅助函数发现令牌已过期时，它将调度一个操作以显示“登录对话框”，但是它将继续调用提取的代码。在调用服务器之前，我需要等待登录对话框更改LoggedIn状态和令牌，但是似乎无法监视此状态更改。（一个想法是从“登录”对话框返回一个承诺，但是我不明白如何返回一个承诺以及从何处返回！）

我感谢以上所有内容可能非常抽象并且难以理解，因此创建了一个完整的代码示例来说明我的需求。

Sample Code

* PS：如果代码沙箱失败，请刷新它。他们似乎在某些插件方面存在种族问题！

Answer 1

这是您要寻找的吗？

componentDidUpdate(prevProps) {
  if (!prevProps.loggedIn && this.props.loggedIn) {
    // User just logged in
  }
}

Answer 2

我还不是thunk的专家，但是我可以说的是，您的serverCall函数必须返回带有调度参数的函数（此处为see examples）

您必须在此子函数中调度一个动作（实际上，调用一个动作创建者会将数据置于应用程序状态。

您不必做出明确的承诺，因为获取返回已经是一个承诺。

我将尝试：

export const serverCall = (
  url,
  method,
  body = undefined,
  successMessage = undefined
) => {

  // your code 
  return function (dispatch) {

    return fetch(url, {
      method: method,
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
      },
      ...(body && { body: JSON.stringify(body) })
    }).then(response => response.JSON())
      .then(response => 
     if (response.ok) {
        if (successMessage) {
          console.log(successMessage);
        }
        dispatch(fetchData(response))
      } else {

index.js

    <Button
      onClick={() =>
        this.props.serverCall(
          "https://jsonplaceholder.typicode.com/users",
          "GET"
        )
    >

如果使用Redux，将在此处删除状态。全部通过mapDispatchToProps从道具中获取。

const mapDispatchToProps = dispatch => ({
  onLogin: (username, password) => dispatch(login(username, password)),
  ToggleIsLoginDialogOpen: IsLoginDialogOpen =>
    dispatch(toggleIsLoginDialogOpen(IsLoginDialogOpen)),
  serverCall: (url, method) => dispatch(serverCall(url, method))
});

React Redux等待状态改变

2 个答案: