JavaScript technologies

Flux and Redux

Horváth, Győző
senior lecturer
horvath.gyozo@inf.elte.hu

Financed from the financial support ELTE won from the Higher Education Restructuring Fund of the Hungarian Government

Flux

Architecture conception

Flux

Conception

Not a framework

Starting point

STATE MANAGEMENT

Cross-references between views and models

Two-way data-binding

--> Unnecessary re-rendering

Fluxxor (framework) description about the Flux pattern

Solution

Unidirectional data-flow

Expected behavior

References

• Flux homepage
• Facebook's implementation
• Fluxxor
• Fluxxor TODO List
• Fluxxor image viewer

Redux

Application abstraction

Basic conception

• one store instead of multiple stores
• dispatcher inside store
• actions
• reducers: making a new app state based on the action
• immutable state
• pure functions
• Separate the whole app state from the view
• Dumb and smart view components

Basic conception

Breaking down a task into steps

1. Core: application state and redux-independent processing functions
2. Actions: define actions
3. Store: put the core inside a reducer, and bind the actions to the processing functions
4. React: create the dumb component hierarchy
5. react-redux: connect the store to the hierarchy
6. Dev-tools: make your development flow easier