SLIDE 1
Redux
Clara Miranda García (UO264958) Daniel Rückert García (UO236405) Óscar Sánchez Campo (UO265078)
- 1. Introduction
- 2. Stakeholders
- 3. Components
- 4. Architectural style
- 5. Quality Attributes
- 6. Constraints
- 7. Development Aspects
Redux Clara Miranda Garca (UO264958) Daniel Rckert Garca (UO236405) - - PowerPoint PPT Presentation
Redux Clara Miranda Garca (UO264958) Daniel Rckert Garca (UO236405) - - PowerPoint PPT Presentation
Redux Clara Miranda Garca (UO264958) Daniel Rckert Garca (UO236405) scar Snchez Campo (UO265078) 1. Introduction 2. Stakeholders 3. Components 4. Architectural style 5. Quality Attributes 6. Constraints 7. Development Aspects What is
SLIDE 2
SLIDE 3
What is Redux
SLIDE 4
What is Redux?
"Redux is a predictable state container for JavaScript applications"
Why do we need a predictable state container? What is a state container? How does that fit into modern web applications?
SLIDE 5
What is Redux?
Why do we need to use it?
SLIDE 6
What is Redux?
Time-traveling debugger
SLIDE 7
Stakeholders
SLIDE 8
Stakeholders
Dan Abramov Andrew Clark
Co-authors
SLIDE 9 Facebook
Stakeholders
Open-source community
Developers
SLIDE 10
Stakeholders Contributors
SLIDE 11
Stakeholders How to contribute
Stable software
Issues
Pull request to "next" branch
SLIDE 12
Components
SLIDE 13
Components
Actions
Reducers
Store
SLIDE 14
Actions
Action: (p1, p2, ...) => {type , p1, p2, ...}
- Says "something will be done“
- Stores the parameters
SLIDE 15
Reducers
Reducer: ( previousState, action ) => newState Action: (p1, p2, ...) => {type , p1, p2, ...}
- Selects which code will be executed
- Gets the previous state
- Returns a new modified state
- Extracting common code
- Reducer composition
- Get rid of the switch
SLIDE 16
Store
Reducer: ( previousState, action ) => newState Action: (p1, p2, ...) => {type , p1, p2, ...} Store:
- subscribe: () => unsubscribe()
- dispatch: (action) => ()
- getState: () => currentState
- Initiates the execution of an action
- Maintains the current state
- Notifies changes to the components
SLIDE 17
Architectural style
SLIDE 18
Architectural Style The Redux Pattern
Based on Flux
3 Principles
Single source of truth
Store
Read-only state
Manipulated by actions, never directly!!!
Changes made with pure functions
Never change the input!!!
SLIDE 19
Unidirectional Data Flow
Predictable
Easier to debug
Easier to modify
Less error prone
SLIDE 20
Quality Attributes
SLIDE 21
Quality Attributes
Lets see what they tell us on their official website:
SLIDE 22
Quality Attributes
From this we can conclude that the quality attributes they value the most are:
Reliability Reusability Supportability Interoperability
SLIDE 23
Constraints
SLIDE 24
Constraints
Open Source Three main principles: Single source
- f truth
State is read-
- nly
Changes are made with pure functions Make state mutations predictable
SLIDE 25
Development Aspects
SLIDE 26
Development Aspects
Written purely on TypeScript and Javascript Modular
SLIDE 27