React Redux 等待状态改变答案

【问题标题】：React Redux wait for state changeReact Redux 等待状态改变
【发布时间】：2019-03-16 20:08:22
【问题描述】：

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

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

我很欣赏以上所有内容可能非常抽象且难以理解，因此创建了一个完整的代码示例来展示我需要的内容。

Sample Code

*PS : 如果代码沙箱失败请刷新。他们似乎对某些插件有一些种族问题！

【问题讨论】：

标签： reactjs redux fetch-api

【解决方案1】：

这是你要找的吗？

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

【讨论】：

不！请阅读问题并查看示例代码。我的辅助函数不是组件
@Asha 你的辅助函数是什么？ ToggleIsLoginDialogOpen?
你可以在 helpers/serverCall 下找到它
您的小提琴中只有一个文件。但不管怎样，流量还是一样的。您在 componentDidUpdate 中对其进行测试，然后调用您的助手。或者，如果您正在使用 sagas，您也可以在登录 saga 中这样做
感谢您的帮助，但如果您花一些时间阅读问题并查看示例，那就太好了。您必须打开左侧边栏才能查看多个文件。

【解决方案2】：

我还不是 thunk 专家，但我可以说的是你的 serverCall 函数必须返回一个带有调度参数的函数（see examples 这里）

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

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

我会尝试类似的东西：

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 从 props 中获取的。

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

【讨论】：