Skip to main content
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.
1

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.
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;
2

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.
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>
  );
}

​
Props

ReplykeIntegrationProvider accepts the same props as ReplykeProvider:
​
projectId
string
required
Your Replyke project ID.
​
signedToken
string | null
A signed JWT for external authentication mode. See External Auth.

​
Exports Reference

All integration exports are available from @replyke/react-js:
ExportTypePurpose
replykeReducersReducerCombined reducer for all Replyke feature slices. Mount under the replyke key.
replykeApiReducerReducerRTK Query API reducer. Mount under the replykeApi key.
replykeApiMiddlewareMiddlewareRTK Query middleware for cache invalidation and subscriptions.
replykeMiddlewareMiddleware[]Combined array of all required Replyke middleware. Spread into your middleware chain.
ReplykeIntegrationProviderReact.FCContext provider for integration mode.

​
State Shape

When integrated, Replyke occupies two top-level keys in your store: 
{
  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: { ... },
}
The replyke and replykeApi keys are required by Replyke’s internal selectors. Mounting the reducers under different keys will cause the SDK to malfunction.

​
TypeScript

Replyke exports ReplykeState if you need to type a state slice that references Replyke’s shape: 
import type { ReplykeState } from "@replyke/react-js";

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