将全局配置添加到反应钩子答案

【问题标题】：Getting global config to a react hook将全局配置添加到反应钩子
【发布时间】：2021-05-16 17:23:09
【问题描述】：

我有一个 React 应用程序，它与多个 REST API 通信。

我已经从 redux-thunks 重构了我的应用程序，以使用 react-query 来调用 API 的业务逻辑。

在 react-query 上观看视频，建议将其抽象为自定义钩子。

所以，例如：

//
// useTodos.js
import { useQuery } from 'react-query';
import { TodoApi } from 'my-api-lib';
import config from '../config';

const todoApi = new TodoApi(config.TODO_API_BASE_URL);

const useTodos = (params) => 
  useQuery(
    [todo, params],
    ()  => todoApi.fetchTodos(params)
);

我有另一个应用程序，我可以在其中使用这些钩子也与 REST API 对话。所以我想把这些钩子移到一个公共库中。但是配置是由客户端提供的。如何从客户端获取配置（TODO_BASE_API_URI）甚至“todoApi”实例到自定义挂钩？

在 Redux 中，我基本上在启动时使用“thunk with extra argument”对 TodoApi 实例进行了依赖注入

是否有一种“古怪”的方式可以将全局配置添加到我的自定义挂钩中？

【问题讨论】：

也许试试 React 上下文？用户向上下文提供一个配置对象，钩子从上下文中读取（通过useContext）。
谢谢，useContext，createUseTodo 答案，以及在每个钩子调用中传递 api 实例都是我想到的解决方案。我希望有一种不同的方式，但也许没有。也许是某种代理环境变量

标签： reactjs react-hooks react-query

【解决方案1】：

库（我假设它是 my-api-lib）应该导出一个需要 url（或任何其他配置）的函数，并返回 useTodoApi 钩子。

在您的公共库中：

import { useQuery } from 'react-query';
import { TodoApi } from './TodoApi';

export const createUseTodoApi = url => {
  const todoApi = new TodoApi(url);

  return params => 
    useQuery(
      [todo, params],
      ()  => todoApi.fetchTodos(params)
  );
}

在您的应用中：

import { createTodoApi } from 'my-api-lib';
import config from '../config';

export const useTodoApi = createUseTodoApi(config.TODO_API_BASE_URL);

【讨论】：