Is it possible to share the NgRx store and save in LocalStrage from the remotes application to the host?

[vahidsamimi]

For which library do you need help?

native-federation

Question

Hi all,
I have a monorepo that contains three Angular 18 standalone applications, each with its own library.
In the libraries of the remote apps, I've used NgRx, and when running each app individually, everything works fine, and the data is stored in localStorage.

Now, when I want to use one of the remote apps in the host, I need the localStorage in the host to also get updated so that the other remote apps or the host itself can read and use the data.
Im using "@angular-architects/native-federation": "^18.2.2"
so far I have created a configuration in the remote app's library and then imported it into the host. However, I don't want the host app to be dependent on these.

import {
  ActionReducer,
  ActionReducerMap,
  MetaReducer,
  provideState,
} from '@ngrx/store';
import { localStorageSync } from 'ngrx-store-localstorage';

import { TaskReducer } from './reducer/Task.reducer';
import { toolboxReducer } from './reducer/toolbox.reducer';

export const reducers: ActionReducerMap<any> = {
  currentTask: currentTaskReducer,
  toolbox: toolboxReducer,
};

export function localStorageSyncReducer(
  reducer: ActionReducer<any>,
): ActionReducer<any> {
  return localStorageSync({
    // add keys to sync with local storage
    keys: ['currentTask', 'toolbox'],
    rehydrate: true,
  })(reducer);
}

export const metaReducers: Array<MetaReducer<any, any>> = [
  localStorageSyncReducer,
];

export const provideTaskManagementSharedStore = [
  provideState('Task', currentTaskReducer),
  provideState('toolbox', toolboxReducer),
];

host App bootstrap.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { provideStore } from '@ngrx/store';
import { provideTaskManagementSharedStore } from '@task-management';

import { AppComponent } from './app/insuria-iwp.component';

void bootstrapApplication(AppComponent , {
  providers: [
    provideStore(),
    provideTaskManagementSharedStore,
  ],
  
  ... the other code
});

in the Redux DevTools Chrome extension, I can see all state changes coming from the MFE apps in the host app. However, how can I persist the state in localStorage?

The question is: how can I achieve this without importing the library of MFE-Apps?