Using Reduck Separately#

When integrating Reduck separately from Modern.js, the following modifications need to be made:

1. Install the Reduck related packages

Install the Reduck package in the project: @modern-js-reduck/react.

2. Import package names for API

When used in Modern.js, the package name for exporting Reduck API is: @modern-js/runtime/model. When using Reduck separately, the package name for exporting is: @modern-js-reduck/react.

3. Wrap the Provider component

Modern.js automatically wraps the Provider component used to inject the Reduck global Store on the entry component of the application. When using Reduck separately, this needs to be done manually.

Example:

// Root Component
const Root = () => {
  return (
    <Provider>
      {/* Entry App */}
      <App />
    </Provider>
  );
};

4. Feature configuration

When used in Modern.js, Reduck features can be configured through runtime.state. When used separately, configuration needs to be done through the config or store parameter of Provider.

Example:

const Root = () => {
  return (
    {/* Close Redux DevTools */}
    <Provider config={{ devTools: false }}>
      <App />
    </Provider>
  )
}