I have multiple modules in my react/redux app, let's say:
root:
|-- moduleA
|-- moduleB
|-- moduleC
|-- ...
They all have similar shape:
moduleX
|-- components
|-- containers
|-- actions.js
|-- reducers.js
|-- index.js
And moduleA needs few actions from moduleB, but moduleB also needs few actions from moduleA. They use actions from another module, because they sometimes have to modify state (redux store) of another module. It is business logic, and I don't want to duplicate parts of the store.
All modules have index.js file, they export actions, reducers and main container. But importing index.js from moduleA in moduleB and index.js from B inn A leads to circular dependencies:
ERROR in Circular dependency detected:
src/moduleA/containers/Container.jsx ->
src/moduleB/index.js ->
src/moduleB/containers/Container.jsx ->
src/moduleA/index.js ->
src/moduleA/containers/Container2.jsx ->
src/moduleA/containers/Container3.jsx ->
src/moduleA/containers/Container.jsx
And few more errors reported by circular-dependency-plugin.
I wonder, how can I import only actions from moduleB index.js in moduleA? Now, as workaround, I use this pattern:
import * as moduleBActions from "../path/to/moduleB/actions"
Is there any other way? I have to export containers in index.js, because they are part of the module API and I use them in router configuration. I don't want to duplicate parts of the store (each module have own branch in state object)