Apollo–Soyuz module handshake

Most of the React tutorials are suggesting to group files by purpose, e.g. you should put all your actions to the single folder called “actions”, while your reducers should be stored in the “reducers” folder. For instance, at the beginning it could look like this:

actions/

users.js

index.js

components/

UserList.js

index.js

reducers/

users.js

index.js

This approach works fine at the beginning, but when your app starts growing it becomes way harder to navigate in the codebase and also causes a higher coupling between your modules.

For instance, if our UserList component needs to access users, which are fetched by the API call (which is caused by action) it will need to import the action from the actions folder. Our reducer should import the action too in order to properly handle that.

As soon as we realized that the direct access to the store from the component increases our coupling we decided to switch over to the getters concept, so we had to introduce a new root folder called getters .

When our data fetching functions became complex enough we decided to switch to sagas, and that was obvious that sagas should be stored in the separate folder called sagas .

Let’s take a look at the resulting directory structure and dependencies between files:

actions/

users.js

index.js

components/

UserList.js (imports getters/users, actions/users)

index.js

reducers/

users.js (imports actions/users)

index.js

sagas/

users.js (imports getters/users, actions/users)

index.js

getters/

users.js

index.js

Let’s summarize all the issues we have with this structure: