---
sidebar_position: 12
title: Using Reduck Separately
---
# 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`](/apis/app/runtime/model/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:

```tsx
// 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`](/configure/app/runtime/state). When used separately, configuration needs to be done through the `config` or `store` parameter of [`Provider`](/apis/app/runtime/model/Provider).

Example:

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