React Admin：如何在Redux Saga中协调useDataProvider多资源请求？

Great question! I've faced this exact scenario when building custom react-admin pages that need to fetch multiple resources while keeping business logic decoupled in sagas. Here are a few proven approaches that work seamlessly with react-admin's error handling and notification system:

Option 1: Inject the DataProvider into Your Saga Middleware #

React-admin's dataProvider is just a plain JavaScript function—you don't need the useDataProvider hook to use it. You can inject it directly into your saga middleware during setup, making it available to all your sagas. This lets you handle multi-request coordination in sagas while still tapping into react-admin's built-in error handling tools.

Step-by-Step Implementation #

First, pass your dataProvider to the saga middleware's context when initializing your store:

// store.js
import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootReducer from './reducers';
import rootSaga from './sagas';
import dataProvider from './your-data-provider'; // Your configured dataProvider

// Inject dataProvider into saga context
const sagaMiddleware = createSagaMiddleware({
  context: { dataProvider },
});

const store = createStore(rootReducer, applyMiddleware(sagaMiddleware));
sagaMiddleware.run(rootSaga);

export default store;

Then, in your saga, use the injected dataProvider to coordinate parallel/serial requests, and leverage react-admin's utilities for notifications and error handling:

// sagas.js
import { call, put, takeLatest, all } from 'redux-saga/effects';
import { showNotification, handleResponseError } from 'react-admin';

function* fetchMultipleResourcesSaga() {
  try {
    // Fetch multiple resources in parallel
    const [accounts, posts, comments] = yield all([
      call(dataProvider, 'GET_LIST', 'accounts', {
        pagination: { page: 1, perPage: 10 },
        sort: { field: 'id', order: 'ASC' },
        filter: {},
      }),
      call(dataProvider, 'GET_LIST', 'posts', {
        pagination: { page: 1, perPage: 10 },
        sort: { field: 'createdAt', order: 'DESC' },
        filter: {},
      }),
      call(dataProvider, 'GET_LIST', 'comments', {
        pagination: { page: 1, perPage: 10 },
        sort: { field: 'createdAt', order: 'DESC' },
        filter: {},
      }),
    ]);

    // Dispatch success action to update your redux store
    yield put({
      type: 'FETCH_RESOURCES_SUCCESS',
      payload: { accounts, posts, comments },
    });

    // Trigger react-admin's success notification
    yield put(showNotification('Resources loaded successfully', 'success'));
  } catch (error) {
    // Use react-admin's built-in error handler to auto-show error notifications
    yield call(handleResponseError, error);
  }
}

function* rootSaga() {
  yield takeLatest('FETCH_MULTIPLE_RESOURCES', fetchMultipleResourcesSaga);
}

export default rootSaga;

Option 2: Pass DataProvider from Component to Saga via Action Payload #

If you prefer a more component-scoped approach, you can fetch the dataProvider using useDataProvider in your custom page component, then pass it as a payload to your saga action. This avoids global injection and keeps things modular.

Component Code #

// CustomPage.js
import React, { useEffect } from 'react';
import { useDataProvider, useDispatch } from 'react-admin';

const CustomPage = () => {
  const dataProvider = useDataProvider();
  const dispatch = useDispatch();

  useEffect(() => {
    // Pass dataProvider directly to the saga action
    dispatch({
      type: 'FETCH_MULTIPLE_RESOURCES',
      payload: { dataProvider },
    });
  }, [dispatch, dataProvider]);

  // Render your page content here
  return <div>Custom Page Content</div>;
};

export default CustomPage;

Saga Code #

// sagas.js
import { call, put, takeLatest, all } from 'redux-saga/effects';
import { showNotification, handleResponseError } from 'react-admin';

function* fetchMultipleResourcesSaga(action) {
  const { dataProvider } = action.payload;
  try {
    const [accounts, posts, comments] = yield all([
      call(dataProvider, 'GET_LIST', 'accounts', { /* params */ }),
      call(dataProvider, 'GET_LIST', 'posts', { /* params */ }),
      call(dataProvider, 'GET_LIST', 'comments', { /* params */ }),
    ]);

    yield put({ type: 'FETCH_RESOURCES_SUCCESS', payload: { accounts, posts, comments } });
    yield put(showNotification('Resources loaded successfully', 'success'));
  } catch (error) {
    yield call(handleResponseError, error);
  }
}

// Root saga setup remains the same

Option 3: Leverage React-Admin's Built-in Redux Actions #

If you want to lean into react-admin's existing data management system, you can dispatch react-admin's native CRUD actions (like CRUD_GET_LIST) and listen for their success/failure events in your saga. This lets react-admin handle the request lifecycle, caching, and notifications automatically—you just coordinate the results.

Saga Code #

// sagas.js
import { put, takeLatest, take, all } from 'redux-saga/effects';
import { CRUD_GET_LIST, CRUD_GET_LIST_SUCCESS, CRUD_GET_LIST_FAILURE } from 'react-admin';

function* fetchMultipleResourcesSaga() {
  // Dispatch react-admin's built-in CRUD actions for each resource
  yield put({
    type: CRUD_GET_LIST,
    payload: {
      resource: 'accounts',
      pagination: { page: 1, perPage: 10 },
      sort: { field: 'id', order: 'ASC' },
      filter: {},
    },
    meta: { resource: 'accounts', fetch: 'GET_LIST' },
  });

  yield put({
    type: CRUD_GET_LIST,
    payload: {
      resource: 'posts',
      pagination: { page: 1, perPage: 10 },
      sort: { field: 'createdAt', order: 'DESC' },
      filter: {},
    },
    meta: { resource: 'posts', fetch: 'GET_LIST' },
  });

  yield put({
    type: CRUD_GET_LIST,
    payload: {
      resource: 'comments',
      pagination: { page: 1, perPage: 10 },
      sort: { field: 'createdAt', order: 'DESC' },
      filter: {},
    },
    meta: { resource: 'comments', fetch: 'GET_LIST' },
  });

  // Wait for all requests to succeed
  const [accountsRes, postsRes, commentsRes] = yield all([
    take(action => action.type === CRUD_GET_LIST_SUCCESS && action.meta.resource === 'accounts'),
    take(action => action.type === CRUD_GET_LIST_SUCCESS && action.meta.resource === 'posts'),
    take(action => action.type === CRUD_GET_LIST_SUCCESS && action.meta.resource === 'comments'),
  ]);

  // Process the results
  yield put({
    type: 'FETCH_RESOURCES_SUCCESS',
    payload: {
      accounts: accountsRes.payload.data,
      posts: postsRes.payload.data,
      comments: commentsRes.payload.data,
    },
  });
}

// Optional: Listen for failures to add custom logic (react-admin already shows error notifications)
function* handleFetchFailures() {
  yield takeLatest(CRUD_GET_LIST_FAILURE, function*(action) {
    console.error(`Failed to load ${action.meta.resource}:`, action.error);
  });
}

function* rootSaga() {
  yield takeLatest('FETCH_MULTIPLE_RESOURCES', fetchMultipleResourcesSaga);
  yield handleFetchFailures();
}

export default rootSaga;

Which Option Should You Choose? #

• Option 1: Best for apps where sagas frequently need access to the dataProvider globally.
• Option 2: Ideal for component-specific requests where you want to avoid global dependencies.
• Option 3: Perfect if you want to reuse react-admin's caching and built-in request handling while still coordinating logic in sagas.

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