> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replyke.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Redux Integration

> Merge Replyke's Redux state into your existing store using ReplykeIntegrationProvider

By default, `ReplykeProvider` creates and manages its own isolated Redux store. This is the recommended approach for most projects — no Redux configuration required.

If your application already has its own Redux store, we strongly recommend merging Replyke's state into it using `ReplykeIntegrationProvider`. Running two separate Redux stores in the same React app is a common source of subtle bugs: React-Redux binds components to the nearest `<Provider>` in the tree, so hooks can silently read from the wrong store depending on where components are rendered.

## When to Use This

**If your app already has a Redux store, use `ReplykeIntegrationProvider`.** This is the right path for virtually every app in that situation. The standalone `ReplykeProvider` is only appropriate for apps that don't use Redux at all.

The standalone provider creates its own internal store. When that coexists with your app's store, React-Redux binds components to whichever `<Provider>` is closest in the tree — which means hooks silently read from the wrong store depending on where a component is rendered. These bugs are hard to spot and hard to trace.

The only reason to use `ReplykeProvider` alongside an existing Redux store is if you have a specific, deliberate reason to keep the two stores completely separate and you fully understand the implications. For nearly everyone, that's not the case.

## Setup

Integration mode requires three changes to your existing store and one change to your provider setup.

<Steps>
  <Step title="Add Replyke reducers to your store">
    Import `replykeReducers` and `replykeApiReducer` from `@replyke/react-js` and add them to your store's `reducer` map. The keys must be exactly `replyke` and `replykeApi` — the SDK's internal selectors depend on these names.

    ```ts theme={null}
    import { configureStore } from "@reduxjs/toolkit";
    import {
      replykeReducers,
      replykeApiReducer,
      replykeMiddleware,
    } from "@replyke/react-js";
    import yourReducer from "./yourSlice";

    const store = configureStore({
      reducer: {
        // Your own reducers
        yourFeature: yourReducer,

        // Replyke — keys must be exactly these
        replyke: replykeReducers,
        replykeApi: replykeApiReducer,
      },
      middleware: (getDefaultMiddleware) =>
        getDefaultMiddleware().concat(...replykeMiddleware),
    });

    export default store;
    export type RootState = ReturnType<typeof store.getState>;
    export type AppDispatch = typeof store.dispatch;
    ```
  </Step>

  <Step title="Replace ReplykeProvider with ReplykeIntegrationProvider">
    Use `ReplykeIntegrationProvider` instead of `ReplykeProvider`. This provider does not create a Redux store — it expects your own `<Provider>` to already be in the tree above it.

    ```tsx theme={null}
    import { Provider } from "react-redux";
    import { ReplykeIntegrationProvider } from "@replyke/react-js";
    import store from "./store";

    function App() {
      return (
        <Provider store={store}>
          <ReplykeIntegrationProvider projectId="your-project-id">
            {/* your app */}
          </ReplykeIntegrationProvider>
        </Provider>
      );
    }
    ```
  </Step>
</Steps>

## Props

`ReplykeIntegrationProvider` accepts the same props as `ReplykeProvider`:

<ParamField body="projectId" type="string" required>
  Your Replyke project ID.
</ParamField>

<ParamField body="signedToken" type="string | null">
  A signed JWT for external authentication mode. See [External Auth](/sdk/authentication/external).
</ParamField>

## Exports Reference

All integration exports are available from `@replyke/react-js`:

| Export                       | Type           | Purpose                                                                               |
| ---------------------------- | -------------- | ------------------------------------------------------------------------------------- |
| `replykeReducers`            | `Reducer`      | Combined reducer for all Replyke feature slices. Mount under the `replyke` key.       |
| `replykeApiReducer`          | `Reducer`      | RTK Query API reducer. Mount under the `replykeApi` key.                              |
| `replykeApiMiddleware`       | `Middleware`   | RTK Query middleware for cache invalidation and subscriptions.                        |
| `replykeMiddleware`          | `Middleware[]` | Combined array of all required Replyke middleware. Spread into your middleware chain. |
| `ReplykeIntegrationProvider` | `React.FC`     | Context provider for integration mode.                                                |

## State Shape

When integrated, Replyke occupies two top-level keys in your store:

```ts theme={null}
{
  replyke: {
    auth: { ... },          // Auth tokens, current user, initialization state
    accounts: { ... },      // Multi-account list and active account
    user: { ... },          // Current user profile
    appNotifications: { ... },
    collections: { ... },
    entityLists: { ... },
    spaceLists: { ... },
    chat: { ... },
  },
  replykeApi: { ... },      // RTK Query cache (collections, entity lists, etc.)
  
  // Your own slices
  yourFeature: { ... },
}
```

<Note>
  The `replyke` and `replykeApi` keys are required by Replyke's internal selectors. Mounting the reducers under different keys will cause the SDK to malfunction.
</Note>

## TypeScript

Replyke exports `ReplykeState` if you need to type a state slice that references Replyke's shape:

```ts theme={null}
import type { ReplykeState } from "@replyke/react-js";

interface RootState {
  replyke: ReplykeState;
  replykeApi: unknown; // RTK Query manages this type internally
  yourFeature: YourFeatureState;
}
```