Download to read offline
Uploaded byVinícius Ribeiro
React / Redux Architectures
The document discusses the advantages of using React and Redux in software development, highlighting the importance of reusable components and immutable state management. It outlines key design concepts, principles of Redux, and patterns for maintaining scalability in applications, such as using presentational and container components, and organizing code with duck patterns. Additionally, it mentions middleware options like Redux Saga and Redux Thunk for handling side effects and asynchronous actions.
React / Redux Architectures
- 1. React / ReduxArchitectures
- 3. Vinícius Ribeiro {Vinna} SoftwareEngineer & UX Designer specialized in Javascript, PHP, and other technologies. Bronco Level 78% Nice Guy Level 98%
- 4. 1. Why useReact?
- 6. The use ofreusable, composable, and stateful components. 2. React - Design Concepts: The nature of reactive updates. The virtual representation of views in memory + Tree Reconciliation. React is a JavaScript library. It’s not a framework.
- 10. 3. Why useRedux?
- 17. State is read-only:The application state cannot be mutated. 3.1. Redux - Principles: Changes are made with pure functions: Reducers. Single source of truth: The Redux store is the one and only source of state in your application.
- 21. 4. The searchfor scalability
- 24. 4.1. Pattern: Presentational andContainer Components:
- 25. Are written asas functional components. 4.1.1. Presentational Components: Receive data and callbacks exclusively via props. Often allow containment via props.children. Have no dependencies on the rest of the app, such as Redux actions or stores. Are concerned with how things look.
- 26. Are usually generatedusing higher order components such as connect() from React Redux. 4.1.2. Container Components: Are often stateful, as they tend to serve as data sources. May contain both presentational and container components Provide the data and behavior to presentational or other container components. Are concerned with how things work.
- 30. 4.2. Pattern: Scaling withDucks :
- 32.
- 34. 4.2.1. Ducks Concepts: Aduck folder: MUST keep code with similar purpose in the same file, ex: reducers, selectors, actions, etc. A duck folder: MUST contain the entire logic for handling only ONE concept in your app, ex: product, cart, session, etc. A duck folder: MUST have an index.js file that exports according to the original duck rules. Separate State Management files from UI files. A duck folder: MUST contain the tests related to the duck.
- 37.
- 38. store / ducks/ index.js
- 39. store / ducks/ users.js
- 40. store / ducks/ thunks.js
- 41.
- 42. 4.3. Redux Middlewares: ReduxSaga: It helps you to separate side-effects from your application, but made it more complex because actions now used in another part of your application where you keep your sagas. Redux Thunk: Allows you to write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met. The inner function receives the store methods dispatch and getState as parameters.
- 43. Questions? Do not aska difficult question, I'm bronco