FAQ

Browser Compatibility

The compiled build artifacts of Reduck use ES6 syntax by default. If you need to support older versions of browsers, please include all packages under the @modern-js-reduck namespace in your application's build process.

Additional Information

Accessing the Main Application Model from a Microfrontend Sub-Application Model

When a microfrontend sub-application model accesses the main application model and the model has not yet been mounted on the main application, it will be automatically mounted on the sub-application.

Example:

import { useModel } from '@modern-js/runtime/model';
import parentModel from '@MasterApp/models/todoModel';

function SubModelApp() {
  const [state, actions] = useModel(parentModel);

  return <div>...</div>;
}

Microfrontend Communication Flowchart

To avoid accidental downgrades, it is recommended to pre-mount the model that the main application needs to share:

// App is the entry component of the main application, and sharedModel1 and sharedModel2 are the models that need to be shared.
App.models = [sharedModel1, sharedModel2];