Andrii Sliusar "Module Architecture of React-Redux Applications"
•
1 like•252 views
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.
Report
Share
Andrii Sliusar "Module Architecture of React-Redux Applications"
- 1. www.luxoft.com Andrii Sliusar Module Architecture of React-Redux Applications
- 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.
- 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