This document discusses module architecture for React-Redux applications. It recommends splitting an application into semantically named modules to improve development speed, scalability, and reduced maintenance costs. The modularity level depends on the application scale, with everything identifiable as a separate component separated. Minimal connectivity between modules ensures the architecture remains scalable and readable. Business logic and data models should be extracted and organized by domain. Selectors wire components to the state model in a clear way. Actions are standardized between modules. A modular architecture has pros like scalability and reduced costs, and a potential con of increased number of files/folders.

1. www.luxoft.com
Andrii Sliusar
Module Architecture
of React-Redux
Applications

2. www.luxoft.com
Problem statement

3. www.luxoft.com
What is “Architecture”?
• Architecture - a fundamental agreement and
solutions.
• Architecture - something important.
• Architecture is difficult to change.
• Architecture must be reused.

4. www.luxoft.com
Why do we need module architecture?
Module architecture is the type of architecture where an application is semantically split
on components.
For what?
• Development speed
• Scaling
• Reduced maintenance costs
• Decrease the input threshold

5. www.luxoft.com
How to ensure the necessary modularity?
The modularity level depends on the scale of the application.
Everything that can be identified as a separate component / project should be separated.
What should we split?
• Main Components
• Data model
• Business logic

6. www.luxoft.com
The connectivity problem of React-Redux architecture?
In order for the project to be scalable and readable, it is necessary to ensure minimal
connectivity between modules.

7. www.luxoft.com
Modular application architecture

8. www.luxoft.com
Extract business logic and domain

9. www.luxoft.com
Root folder
The main idea to keep everything as simple as possible on each level of the architecture.
/project
/core
/screens
app.ts

10. www.luxoft.com
How to organize the architecture of modules?
/screens
/screen1
/actions
/containers
/components
/reducers
/state
index.tsx

11. www.luxoft.com
What to do with styles?
• Styles are in one folder with a component
• SASS is good, but JS-based styles have more option
• Create themes from the very beginning

12. www.luxoft.com
Algorithm for creating a React component
1. Create a component (const or class)
2. Add styles in the same folder
3. Create other logic (actions, reducers, ...)
If it becomes more complex
4. Move props connection to container

13. www.luxoft.com
Why do we need State model?
• It’s a clear way to work with state
• The same data model can be used in DB
• Build domain model from the beginning

14. www.luxoft.com
Wire selectors with state
• Everything is sorted by domains
• It clear easier to modify state and
selectors
export default class User{
public name:string;
public getName = (state) =>
state.user.name;
}
const mapStateToProps = (state, props) => ({
name: User.getName(state)
});

15. www.luxoft.com
What to do with actions?
• They must be standardized
• The same const between modules, but
different values
• They can be processed inside different
modules
enum ACTION_TYPE {
UPDATE_NAME = UPDATE_USER_NAME'
}
export const updateName = (name: string) => ({
type: ACTION_TYPE.UPDATE_NAME,
name
})
then
import {ACTION_TYPE as USER_ACTION_TYPE} from
‘./actions’;

16. www.luxoft.com
Pros and Cons of Modular architecture
Pros:
• Scaling
• Reduced maintenance costs
• Decrease the input threshold
Cons:
• Amount of folders/files

17. www.luxoft.com
Thank you!