Tech talk about scalable architectures with React and Redux. We take a walk on problems that React proposes to solve and in which situations the Redux is indicated. We dive deep into patterns of organization and structuring of projects React and Redux focusing on scalability and maintainability.

1. React / Redux Architectures

3. Vinícius Ribeiro {Vinna}
Software Engineer & UX Designer specialized in
Javascript, PHP, and other technologies.
Bronco Level
78%
Nice Guy Level
98%

4. 1. Why use React?

6. The use of reusable, 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 use Redux?

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 search for scalability

24. 4.1. Pattern:
Presentational and Container
Components:

25. Are written as as 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 generated using 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 with Ducks :

32. Function
vs
Feature

34. 4.2.1. Ducks Concepts:
A duck 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. store / index.js

38. store / ducks / index.js

39. store / ducks / users.js

40. store / ducks / thunks.js

41. Middlewares:

42. 4.3. Redux Middlewares:
Redux Saga: 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 ask a difficult question, I'm bronco