handle a module's redux state from another module

[sergiohortua]

Ask your Question

hi!. I have the following file structure for a project:

In the reduxProvider folder I created a redux to handle it from other modules. Leave the following webpack configuration to share the provider, store and slice. - "It's a redux of a counter that adds, subtracts and resets." - In the host module I already imported it and I can use the provider from the reduxProvider module.

How can I use the reducer dispatch for increment, decrement and reset of the reduxProvider module from the host or any other module?

[sergiohortua]

please help!!

[sergiohortua]

@jbroma ???????

[rasheedk]

I used redux micro front end library to dispatch actions . You need to register actions , so that u can use anywhere in app.

[vlack-coder]

Hi @sergiohortua , what I did on my end was that I put the miniApp reducer in the host app and I shared the folder

  shared: {
          './src/features/reduxSlice': {
            singleton: true,
            eager: true,
            requiredVersion: '1',
          },
    }

Don't put it under exposes, put it under the shared. You can also pass state as props

const MiniAPP = ({ route }: any) => {
  return (
    <ErrorBoundary name="Mini App">
      <React.Suspense fallback={<FallbackComponent />}>
        <MiniAPPNavigator params={route?.params} />
      </React.Suspense>
    </ErrorBoundary>
  );
};

I'm not sure if it's the best way, but it works... You can also manage your state in the Mini App Itself if the state does not interact with the Host App