javascript - 是否可以在功能组件之外使用 React Hooks，或者我必须使用 mobx 或 redux？

Question

我是 React 新手，在阅读文档时，我发现有两种方法可以实现 React 组件，基于函数的和基于类的。我知道在 React 16.8 之前无法管理功能组件中的状态，但在那之后有 React Hooks。

问题是，React Hooks 似乎有一个限制，它们只能在功能组件中使用。以server-client为例，需要修改isAuthenticated状态，而 401 收到。

//client.js
import { useUserDispatch, signOut } from "auth";

export function request(url, args) {
  var dispatch = useUserDispatch();
  return fetch(url, args).then(response => {
  if (response.status === 401) {
    logout(dispatch);
  }
}
);

//auth.js
import React from "react";

var UserStateContext = React.createContext();
var UserDispatchContext = React.createContext();

function userReducer(state, action) {
  ...
}

function UserProvider({ children }) {
  var [state, dispatch] = React.useReducer(userReducer, {
    isAuthenticated: false,
  });

  return (
    <UserStateContext.Provider value={state}>
      <UserDispatchContext.Provider value={dispatch}>
        {children}
      </UserDispatchContext.Provider>
    </UserStateContext.Provider>
  );
}

function useUserState() {
  return React.useContext(UserStateContext);
}

function useUserDispatch() {
  return React.useContext(UserDispatchContext);
}

function signOut(dispatch) {
  dispatch({});
}

export { UserProvider, useUserState, useUserDispatch, loginUser, signOut };

上面的客户端代码会产生错误“只能在函数组件的主体内部调用 Hooks”。
所以也许我必须移动行 var dispatch = useUserDispatch()向上到 request 所在的组件被调用，并通过 dispatch作为 request 的 Prop .
我觉得这样不对，不只是 request被迫关心一些无意义的(对它) dispatch , 还有这个 dispatch将传播到组件需要的任何地方 request .

对于基于类的组件， this.state也没有解决这个问题，但至少我可以使用 mobx。

那么还有其他一些理想的方法来解决这个问题吗？

Answer 1

我也是这个时候来的。长话短说，如果您想自己手动完成所有工作，您需要将 Redux 和 Thunk 与 Async Logic 一起使用，如以下链接 [1] 中的示例详细描述的那样。
[1] https://redux.js.org/tutorials/essentials/part-5-async-logic
还有另一种解决方案可以提供 开箱即用的体验使用异步 API(可以与 OpenAPI 和 GraphQL 一起使用，处理请求，提供具有生命周期的缓存等)包装来自 [1] 的内容及其称为 RTK查询 [2]。
[2] https://redux-toolkit.js.org/rtk-query/overview
下图直观地解释了 [1] 过程.. 但我认为 RTK查询 [2] 将所有内容包装在一个地方，可能是更好的解决方案。有一个快速入门指南 [3]。我会试一下 :-)
[3] https://redux-toolkit.js.org/tutorials/rtk-query/