如何在Admin on rest中动态向store添加新资源以实现CRUD操作

Hey there! I’ve worked through exactly this scenario with aor-loopback before, so let me break down how to dynamically register new resources in your store and enable full CRUD for any LoopBack model you need.

First, Understand the Core Idea #

Admin-on-Rest (AOR) uses Redux under the hood, and it exposes an action to add resources after the initial app load. Instead of hardcoding all <Resource> components in your <Admin> setup, we’ll dispatch this action to register new resources on the fly.

Step 1: Set Up the Dynamic Registration Function #

First, create a utility function that handles dispatching the ADD_RESOURCE action. You’ll need to import the built-in addResource action creator from AOR, plus your configured aor-loopback client.

import { addResource } from 'admin-on-rest';
// Import your pre-configured loopback client (the one you pass to <Admin>)
import loopbackClient from './path-to-your-loopback-client';

// Define default components if you don't want to pass custom ones every time
import { List, Create, Edit, Show } from 'admin-on-rest';

export const registerDynamicResource = (dispatch, resourceName, customOptions = {}) => {
  // Merge default components with any custom ones provided
  const resourceConfig = {
    list: List,
    create: Create,
    edit: Edit,
    show: Show,
    client: loopbackClient, // Tie this resource to your loopback client
    ...customOptions,
  };

  // Dispatch the action to add the resource to the store
  dispatch(addResource(resourceName, resourceConfig));
};

Step 2: Use the Function to Add Resources #

You can call this function anywhere you have access to the Redux dispatch—whether that’s in a component via hooks, a class component connected to Redux, or even a utility script on app load.

Example with React Hooks:

import { useDispatch } from 'react-redux';
import { registerDynamicResource } from './path-to-your-utility';
// Import any custom components you want to use for the resource
import ProductList from './components/ProductList';

const ResourceManagerButton = () => {
  const dispatch = useDispatch();

  const handleAddProductResource = () => {
    // Register the "products" resource with a custom list component
    registerDynamicResource(dispatch, 'products', {
      list: ProductList,
      // Add other customizations here (e.g., edit: ProductEdit)
    });
  };

  return (
    <button onClick={handleAddProductResource}>
      Enable Products CRUD
    </button>
  );
};

Example: Batch Add Multiple Resources

If you need to register several resources at once (like on app initialization), you can loop through a list:

const dispatch = useDispatch();
const resourcesToEnable = ['products', 'orders', 'inventory'];

useEffect(() => {
  resourcesToEnable.forEach(resource => {
    registerDynamicResource(dispatch, resource);
  });
}, [dispatch]);

Step 3: Verify It Works #

Once you dispatch the action, AOR will automatically:

• Add the resource to its internal store
• Generate the corresponding routes (e.g., /products, /products/create)
• Use your aor-loopback client to handle all CRUD requests to your LoopBack backend

Key Notes to Keep In Mind #

• LoopBack Backend Setup: Make sure your target model is exposed via LoopBack’s REST API (check that the model is listed in your backend’s model-config.json and has the REST datasource enabled).
• Custom Components: You can pass fully customized components (list, create, edit, show) to registerDynamicResource to match your UI needs, just like you would with a static <Resource> component.
• Class Components: If you’re using class components instead of hooks, use connect to map dispatch to props, then call this.props.dispatch(...) in your method.

内容的提问来源于stack exchange，提问作者Jonathan Fidelis Paul