Using Redux in both host app and mini app #735
Replies: 2 comments 6 replies
-
|
I accomplished using Redux in React-Native-Web (Re.Pack) by leveraging redux toolkit's I have one true Redux store (the global store) at the root, which is specified as a singleton instance via the ModuleFederation plugin. Mini apps maintain their own slices and expose a When any component in the So the only place where I render a Redux I have a monorepo setup (managed by Nx) and the global store exposes hooks to allow any app in the monorepo to access global store's state (e.g Mini-apps are able to successfully define their own slices, selectors and actions (all defined in their own projects), |
Beta Was this translation helpful? Give feedback.
-
|
My host app has only one different configuration than my mini app and that's as follows:- //mini-app
"@callstack/repack": "^4.3.1"
"webpack": "^5.94.0",
//Host:
"@callstack/repack": "3.7.0",
"webpack": "5.75.0"Okay if i'm following you then i need to remove the mini app provider and have only one provider at host level, but how can i configure host to only download first the rootslice for a perticular mini app before loading the actual mini app, do you have any reference that you can suggest. |
Beta Was this translation helpful? Give feedback.
-
|
Whenever a component in my The |
Beta Was this translation helpful? Give feedback.
-
|
Hi @sahajarora1286 thanks for the details , i've updated my component with similar details My Component that loads the mini app Remote component const RemoteComponent = React.lazy(() => Federated.importModule('testApp', './App'));
const NewsScreen = () => {
const [isMiniAppLoaded, setIsMiniAppLoaded] = useState(false);
useEffect(() => {
const loadMiniAppSlice = async () => {
try {
const {default: miniSlice} = await Federated.importModule(
'testApp',
'./rootReducer',
);
injectReducer('mini', miniSlice);
setIsMiniAppLoaded(true);
} catch (error) {
console.error('Failed to load mini-app slice:', error);
}
};
loadMiniAppSlice();
}, []);
return (
<ErrorBoundary name="NewsScreen">
<React.Suspense
fallback={<Placeholder label="News and Articles" icon="newspaper" />}>
{isMiniAppLoaded && <RemoteComponent />}
</React.Suspense>
</ErrorBoundary>
);
};
export default NewsScreen;Inject Reducer in host app import {configureStore, combineReducers, Reducer} from '@reduxjs/toolkit';
import counterReducer from './counter/counterSlice';
const staticReducers = {
counter: counterReducer,
};
const store = configureStore({
reducer: staticReducers,
});
export type RootState = ReturnType<typeof store.getState>;
export default store;
export const injectReducer = (key: string, asyncReducer: Reducer) => {
if (!store.asyncReducers) {
store.asyncReducers = {...staticReducers};
}
if (!store.asyncReducers[key]) {
store.asyncReducers[key] = asyncReducer;
store.replaceReducer(combineReducers(store.asyncReducers));
}
};
Now when i try to load the remote bundle then i'm getting the issues related to immer and redux , i've already added the immer and redux alias in the host and remote app webapp.config.js files like following:- redux: path.resolve('./node_modules/redux/dist/redux.legacy-esm.js'),
'react-redux': path.resolve(
'./node_modules/react-redux/dist/react-redux.legacy-esm.js',
),
immer: path.resolve('./node_modules/immer/dist/immer.legacy-esm.js'),
'@reduxjs/toolkit': path.resolve(
'./node_modules/@reduxjs/toolkit/dist/redux-toolkit.legacy-esm.js',
),
'redux-thunk': path.resolve(
'./node_modules/redux-thunk/dist/redux-thunk.legacy-esm.js',
), |
Beta Was this translation helpful? Give feedback.
-
|
What is the exact error that you see?
…On Wed, Sep 11, 2024, 1:18 a.m. Rises ***@***.***> wrote:
Hi @sahajarora1286 <https://github.com/sahajarora1286> thanks for the
details , i've updated my component with similar details
My Component that loads the *mini app* Remote component
const RemoteComponent = React.lazy(() => Federated.importModule('testApp', './App'));
const NewsScreen = () => {
const [isMiniAppLoaded, setIsMiniAppLoaded] = useState(false);
useEffect(() => {
const loadMiniAppSlice = async () => {
try {
const {default: miniSlice} = await Federated.importModule(
'testApp',
'./rootReducer',
);
injectReducer('mini', miniSlice);
setIsMiniAppLoaded(true);
} catch (error) {
console.error('Failed to load mini-app slice:', error);
}
};
loadMiniAppSlice();
}, []);
return (
<ErrorBoundary name="NewsScreen">
<React.Suspense
fallback={<Placeholder label="News and Articles" icon="newspaper" />}>
{isMiniAppLoaded && <RemoteComponent />}
</React.Suspense>
</ErrorBoundary>
);};
export default NewsScreen;
Inject Reducer in *host app*
import {configureStore, combineReducers, Reducer} from ***@***.***/toolkit';import counterReducer from './counter/counterSlice';
const staticReducers = {
counter: counterReducer,};
const store = configureStore({
reducer: staticReducers,});
export type RootState = ReturnType<typeof store.getState>;export default store;
export const injectReducer = (key: string, asyncReducer: Reducer) => {
if (!store.asyncReducers) {
store.asyncReducers = {...staticReducers};
}
if (!store.asyncReducers[key]) {
store.asyncReducers[key] = asyncReducer;
store.replaceReducer(combineReducers(store.asyncReducers));
}};
Screenshot.2024-09-11.at.10.37.56.AM.png (view on web)
<https://github.com/user-attachments/assets/aa7feb98-0be0-4d69-b388-b770a2498215>
Now when i try to load the remote bundle then i'm getting the issues
related to immer and redux , i've already added the immer and redux alias
in the host and remote app webapp.config.js files like following:-
redux: path.resolve('./node_modules/redux/dist/redux.legacy-esm.js'),
'react-redux': path.resolve(
'./node_modules/react-redux/dist/react-redux.legacy-esm.js',
),
immer: path.resolve('./node_modules/immer/dist/immer.legacy-esm.js'),
***@***.***/toolkit': path.resolve(
***@***.***/toolkit/dist/redux-toolkit.legacy-esm.js',
),
'redux-thunk': path.resolve(
'./node_modules/redux-thunk/dist/redux-thunk.legacy-esm.js',
),
—
Reply to this email directly, view it on GitHub
<#735 (reply in thread)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ADL7BCPEXNSEXHNJP2EBOBLZV7HBXAVCNFSM6AAAAABNY43JKSVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTANRQHE3DQMY>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
|
Beta Was this translation helpful? Give feedback.
-
|
I get the following errors in my Host app [ScriptManager] Failed while resolving script locator: {"caller": undefined, "scriptId": "hotel"} {"originalError": [TypeError: undefined is not a function]}
|
Beta Was this translation helpful? Give feedback.
-
|
Please make sure that when you Note that I have a mono-repo setup and hence the Also make sure to add the following in the ModuleFederation config of both host and mini-app: Replace Also, please make sure to have a babel-loader rule to transpile these libraries. This is what I have as a rule for these libs: |
Beta Was this translation helpful? Give feedback.
-
|
@sahajarora1286 still getting the same error Failed to load mini-app slice: [Error: Unhandled error. ([ScriptManager] Failed while resolving script locator:)] but after adding use: {
loader: 'babel-loader',
options: {
// target: 'esm',
presets: ['module:metro-react-native-babel-preset'],
cacheDirectory: true,
},
},unable to create webpack bundle I've also verified the steps all looks good to me |
Beta Was this translation helpful? Give feedback.
-
I have a mini app which has full functionality and it's own store using redux and redux toolkit , now i want to load into host app which is based of Super App Showcase and i'm having the following error
mini app that i want to load has following configuration.
Beta Was this translation helpful? Give feedback.
All reactions