Connecting to a redux store from outside an iframe

Viewed 17

I have a next.js application which uses context for state management, we are are moving to redux as context triggers a re-render on on all consumers of a context provider whose value is updated... and we use a global context provider. We are unable to change to co-located context providers as requires a lot of work / we have been burnt by context.

So redux.

I build redux store, and in local development - at app level i see redux tool kit, the actions and state being updated.

const buildStore = () => {
  const devMode = process.env.NODE_ENV === 'development';
  const sagaMiddleware = createSagaMiddleware();

  const store = configureStore({
    // https://redux-toolkit.js.org/api/configureStore
    reducer: rootReducer,
    middleware: (getDefaultMiddleware) => [
      ...getDefaultMiddleware({
        thunk: false, // we use redux-saga, not the default, thunk
        serializableCheck: false, // redux toolkit issues
      }),
      sagaMiddleware,
    ],
    devTools: devMode, // enable devTools in dev env
  });
  sagaMiddleware.run(rootSaga);

  return store;
};

ie

const Widget = ({ formSettings }) => {
  const client = getClient();
  const store = buildStore();

  return (
    <ReduxProvider store={store}>
      <StateProvider formSettings={formSettings}>
        <ApolloProvider client={client}>
          <ThemeProvider>
            <Form />
            <BrowserMessages />
          </ThemeProvider>
        </ApolloProvider>
      </StateProvider>
    </ReduxProvider>
  );
};

Yes we also have apollo, which has a redux store internally. It is our intention to remove context.

Issue i have is that this application is built within an iframe, so when i load the app locally (within iframe) its showing the redux actions, but if i load the application in staging then we are outside the iframe and i do not see the action in RTK or store being updated.. although can seen the network request which is triggered by browser messages, so i know that the application is working as expected (and the component value in the context provider has been updated).

How do i connect RTK to the store in the iframe?

0 Answers
Related