Share redux state among workspaces or libraries inside a monorepo

Question

I’m recently having a hard time to understand how to manage some logic between shared apps and libs, in particular with redux setted up in the main app and the need to use it on the shared-ui components.

On a nutshell:

I have a react-app and a shared UI library on an NX monorepo (but it's package-based so it's basically an npm monorepo):

Nx-project/
├── apps/
│   └── react-app/
│       └── redux-store.js
└── libs/
    └── shared-ui/
        └── component-that-use-redux

I need to use redux hooks (from react-app) inside my shared UI component.
How should I proceed, what's the best practice here?

Should I simply import from the app?
Doesn’t that represent a conflictual issue when it comes to compile the shared ui lib?

Thanks in advance for any insight you can give me.

Answer 1

Firstly, don't import from the app to the lib. Create another NX library for your actions, reducers, types, etc, and import them into your app as well. You can use the Redux package hooks in your UI library (i.e. import from redux). I don't know exactly what the flavour of Redux is that you are using, but basically you can use the official Redux hooks, and reducers, actions and types from your separate NX library inside your app. Try to put as little code as possible in your app and keep your NX libraries small and everything should fit in to place.