What the Flux?
Let's Redux
Nordnet Academy
React
- Fast to render (or can be at least)
- Simple to use (or can be at least)
- Component all the things!
- but.. Just UI
Flux
Data flow
- One way data flow
- Hierarchy of components
- parent => child
Flux
- Application architecture
- Unidirectional data flow
- Pattern not a framework
Flux
Flux
- Lots of different implementations
- https://github.com/voronianski/flux-comparison
Redux
Redux
- Based on Flux ideas
- Influenced by Elm
- http://rackt.github.io/redux/
Problems
- More complexity => more state to manage
- State mutation and asynchronicity
- hard to reason about
- Predictable state mutations?
Solutions
- Single store
- single source of truth
- State is read-only
- mutation through actions
- Reducers
- pure functions for mutations
- [].reduce
Redux
(state, action) => state
Live coding
Initial setup
- News items list
- Constant data
- No async
- No Flux
Step 1
- News items list
- Constant data
- No async
- Redux - store and actions
Step 2
- News items list
- Data from API
- Async action creators
- Redux - middleware
Step 3
- News items list
- Data from API, pagination
- More async action creators
- Redux - less talk, more action/state
Questions?
Nordnet Academy - What the Flux? Let's Redux
By nordnetacademy
Nordnet Academy - What the Flux? Let's Redux
An introduction to Flux and Redux
