React Admin 4.x：如何在DataProvider中访问React Admin Store？

方案一：自定义DataProvider统一注入Workspace ID #

React Admin的所有API请求都通过dataProvider发起，这是统一处理请求参数的最佳位置。你可以基于原始的dataProvider（比如restProvider）做一层包装，在请求中自动注入Store中的workspace ID。

实现步骤： #

1. 利用react-redux的useSelector从Admin的Redux Store中获取workspace ID（路径根据你的Store结构调整）。
2. 拦截dataProvider的请求方法，将workspace ID添加到URL查询参数或请求头中。

代码示例： #

import { useSelector } from 'react-redux';
import { restProvider } from 'react-admin';

const CustomDataProvider = () => {
  // 从Store中获取用户设置的workspace ID
  const workspaceId = useSelector(state => state.settings.workspaceId);
  const baseDataProvider = restProvider('https://your-api-domain.com');

  // 增强fetch方法，统一为所有请求添加workspace ID参数
  const enhancedFetch = (url, options = {}) => {
    const urlObj = new URL(url);
    // 将workspace ID作为查询参数添加到URL
    urlObj.searchParams.set('workspaceId', workspaceId);
    // 如果接口要求通过请求头传递，可替换为以下代码：
    // options.headers = { ...options.headers, 'X-Workspace-ID': workspaceId };
    return baseDataProvider.fetch(urlObj.toString(), options);
  };

  return {
    ...baseDataProvider,
    fetch: enhancedFetch,
  };
};

// 在Admin组件中使用自定义DataProvider
const App = () => (
  <Admin dataProvider={<CustomDataProvider />}>
    {/* 你的资源配置 */}
  </Admin>
);

这种方式的优势是一劳永逸，所有通过React Admin发起的请求都会自动带上workspace ID，无需在每个组件中重复处理。

方案二：在组件中直接获取并传递参数 #

如果仅需在特定组件中手动调用API，可以直接在组件内通过useSelector获取workspace ID，再传递给dataProvider方法。

代码示例： #

import { useDataProvider, useSelector } from 'react-admin';
import { useState, useEffect } from 'react';

const PostList = () => {
  const dataProvider = useDataProvider();
  const workspaceId = useSelector(state => state.settings.workspaceId);
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const fetchPosts = async () => {
      const response = await dataProvider.getList('posts', {
        filter: { workspaceId }, // 将workspace ID作为筛选参数传入
        sort: { field: 'createdAt', order: 'DESC' },
        pagination: { page: 1, perPage: 10 },
      });
      setPosts(response.data);
    };

    fetchPosts();
  }, [dataProvider, workspaceId]);

  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
};

为什么不推荐直接读取localStorage？ #

• 状态一致性问题：直接读取localStorage会绕过Redux的状态管理，当Store中的workspace ID更新时，localStorage可能未同步，导致请求参数错误。
• 不符合React Admin规范：React Admin基于Redux管理全局状态，直接操作localStorage破坏了单一数据源原则，增加了维护复杂度。
• 缺乏响应式更新：localStorage的变化不会触发组件重新渲染，而useSelector会自动监听Store状态变化，确保参数更新后请求能及时发起。

内容的提问来源于stack exchange，提问作者user7921367