Intro to React
& Redux
Visit our website
Presented by Vijay & Chadd
Enter Our Raffle!
React & Redux?
Redux is a design pattern, just like MVC
Traditional MVC
- Models hold data
- Views for presentation
-
Controllers that liaison between views and models to update information and present new views
- Advantages & Disadvantages:
- + Industry standard, has worked for 30+ years
- - Scaling tends to be a challenge (especially writing new controllers and avoiding code bloat)
How is Redux similar to traditional MVC?
- Views are created with React
- Central "store" for data aka "application state" (like a model)
- The Store communicates indirectly with React Views via "Actions", that create new states (with the help of "Reducers") which trigger re-rendering of Views
- The key difference between MVC & Flux/Redux is the concept of unidirectional data flow
- By the way, Redux is NOT Redux Framework :)
What's Unidirectional Data Flow?
A Diagram to Explain
* from the Flux website @ https://facebook.github.io/flux/docs/overview.html
- Essentially data flows one way only.
- Views emit actions (through events) which are translated by dispatchers that update the store (central state).
- Top level views "listen" for changes to store, re-render all concerned views
- All modules are independent. State is not directly mutated by a controller
- Compare this to MVC, where data is usually manipulated directly by controllers, as project scales so do controllers (could this be buggy)?
Explanation from Flux Website
- Views can continue to emit actions which are handled by dispatchers and sent to stores before updating the view again (with new data)
Need more info?
Here's a video from Facebook
Find out about the scaling issues they had with their chat app on MVC
What's Redux's part in Flux?
- Uses "reducer functions" to manipulate the state of your application, state should be "immutable"
- As your application grows in scale, you can abstract your reducer complexity into smaller reducers (which later are combined by your app into one place)
- One central store for your application (whereas Flux can support many stores)
Let's do an Exercise
(A simple demo)
More Great Demos At:
What is MobX?
An alternative to Redux / Flux
MobX - Core Ideas:
- You don't need to make state "immutable"
- The real issue is state being inconsistent -- so:
- Let MobX handle this problem for you!
- Key benefits:
- You get to work with arrays, objects, primitives directly again
- MobX handles the derivations & reactions (changes to your UI & I/O) through "observables"
- It's kind of magic
MobX Design Pattern
- Actions are your plain functions, event handlers
- You mutate the state, then let MobX handle the updates
Let's check out their website demo
Flux vs Redux vs MobX vs MVC
What Should I Use?
MVC / MobX
- You want to continue to work with JavaScript the way you are used to (object oriented programming)
- You prefer managing models / data / state directly (as opposed to indirect)
- You love magic
Flux / Redux
- You desire greater separation of concern and have a strong need to track down every last thing in your app
- Scaling has been a pain point for you in past applications
- You are ready to move on past traditional MVC
- You dislike magicians
Wrap Up
- Flux / Redux = just a new idea for designing an application -- try it out
- Not every project needs Flux/Redux -- e.g. if you're making a simple website where data isn't changing often -- you probably can just use vanilla JS
- Use MobX -- it's also a great new idea for designing an application -- which one do you like better? MobX or Redux? Or are you still privy to MVC?
Thanks for coming!
Let's do the raffle!
Credits:
Thank you to the following:
Disney, GA, Chadd, and YOU!
Over 150 RSVPS! You guys are amazing!
See you all next time, and help us spread the word!
Subscribe to Us on Youtube
(especially if you want to watch this on video again and want to see other trainings/videos):