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?