4 ms·

Hey, lib author here. Let me first explain Flux in five seconds. Instead of mutating your models, any data mutation in your app is described as a plain object

Hey, lib author here. Let me first explain Flux in five seconds. Instead of mutating your models, any data mutation in your app is described as a plain object describing “what happened” (e.g. { type: LIKED_POST, postId: 42 }) and broadcasted globally. Models (called Stores in Flux) have no setters and change their internal state in response to specific mutation objects (called Actions). The goal of Flux is to have single source of truth and make it easy to avoid race conditions and cascading updates. If some data is wrong, just repeat the same Actions in the same order, and you'll get the same data in Stores. Very easy to debug. Now, for Redux. It keeps the properties of Flux (mutations described as objects), but instead of Stores mutating internal state, it has Reducers—pure functions with (state, action) => state signature. While writing Flux apps, I noticed that the _essence_ of every Store I ever wrote was a reducer function. It turns out that using pure functions instead of event emitters has many benefits: they are composable (https://gist.github.com/gaearon/d77ca812015c0356654f https://gist.github.com/gaearon/d77ca812015c0356654f), it is possible to hot reload their logic (https://camo.githubusercontent.com/5688a6141e6a86baca5d252463dbbce86f8f71d2/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f662e636c2e6c792f6974656d732f325a324433553236306432413331316b3242307a2f53637265656e2532305265636f7264696e67253230323031352d30362d3033253230617425323030332e3232253230706d2e676966 https://camo.githubusercontent.com/5688a6141e6a86baca5d25246...). I wrote Redux for my React Europe talk about Hot Reloading and Time Travel (https://github.com/react-europe/cfp-2015/blob/master/live-react/proposal.yaml https://github.com/react-europe/cfp-2015/blob/master/live-re...). It got popular before I explained _why_ I made it. In my talk I show what kind of powerful devtools it is possible to build on top of Redux. The video of my talk will be up soon, you can check when it appears here: https://www.youtube.com/channel/UCorlLn2oZfgOJ-FUcF2eZ1A?app=desktop https://www.youtube.com/channel/UCorlLn2oZfgOJ-FUcF2eZ1A?app.... Also check out my article on the subject: https://medium.com/@dan_abramov/the-evolution-of-flux-frameworks-6c16ad26bb31 https://medium.com/@dan_abramov/the-evolution-of-flux-framew... EDIT: THE VIDEO IS UP! https://www.youtube.com/watch?v=xsSnOQynTHs https://www.youtube.com/watch?v=xsSnOQynTHs

adeptima 11y ago
Hi Dan, Great job. Hot reloading is SO HOT .. in your hands! Would you please share your plans for Redux, Redux DevTools and other tools you are working on? What's your vision for React based tools in such quick changing environment? I'm really scared to move all my projects to React base cause constant breaking changes. Coming packages splits in React 0.14, rush into ES6/7 rewrites, etc. is a huge hit for guys like me who can code only in free time outside of standard business hours. I would rather follow someone with strong vision ;))) ... and it seems you got your own. Please share what's on your mind. P.s. And yee ... please do presentation at MoscowJS ;)) http://www.moscowjs.ru/ http://www.moscowjs.ru/ https://www.facebook.com/groups/moscowjs/ https://www.facebook.com/groups/moscowjs/ Ilya S
tel 11y ago
They're a bit more than just reducers. Given that you always package them with initial state they're a little more like "left folds" [0] or "Moore machines" [1] (they're isomorphic). What's neat about this is that noticing that structure describes a whole bunch of ways to compose machines and folds—in particular, there's parallel composition like Flux suggests ("all stores receive the same actions", your linked example, https://gist.github.com/gaearon/d77ca812015c0356654f https://gist.github.com/gaearon/d77ca812015c0356654f) and sequential ("category-like") composition. [0] https://hackage.haskell.org/package/foldl-1.1.0/docs/Control-Foldl.html#t:Fold https://hackage.haskell.org/package/foldl-1.1.0/docs/Control... [1] https://hackage.haskell.org/package/machines-0.5.1/docs/Data-Machine-Moore.html https://hackage.haskell.org/package/machines-0.5.1/docs/Data...
nemanja 11y ago
Hey Dan, Redux looks awesome. I am using react-dnd and hot reloader on my current project and they are great. Thank you for all the great contributions you are making to the ecosystem. The idea of modeling the store as a reducer is clever. Complication I see is that my action creators are often not pure functions (i.e. there is generally a side effect to update the database and persist the change). However, given the focus of redux on improving the dev workflow, I suppose database updates/side effects could be mocked out. How would you handle this scenario? What would actually be awesome to have and go hand-in-hand with redux is an immutable write-only isomorphic database (for application state persistence), where you use the same initial state/reducer for redux and the database. Database stores initial state, logs actions and computes the current state using the reducer (and caches it) - much like redux on the client. Curious to hear what people think about this or if anyone has seen anything like it.
- danabramov 11y ago
  >Complication I see is that my action creators are often not pure functions (i.e. there is generally a side effect to update the database and persist the change). https://github.com/gaearon/redux#how-do-i-do-async https://github.com/gaearon/redux#how-do-i-do-async
Zagitta 11y ago
Thank you! I've been reading about Flux for a while now but your simple explanation just made it click

adeptima 11y ago

Hi Dan, Great job. Hot reloading is SO HOT .. in your hands! Would you please share your plans for Redux, Redux DevTools and other tools you are working on? What's your vision for React based tools in such quick changing environment? I'm really scared to move all my projects to React base cause constant breaking changes. Coming packages splits in React 0.14, rush into ES6/7 rewrites, etc. is a huge hit for guys like me who can code only in free time outside of standard business hours. I would rather follow someone with strong vision ;))) ... and it seems you got your own. Please share what's on your mind. P.s. And yee ... please do presentation at MoscowJS ;)) http://www.moscowjs.ru/ http://www.moscowjs.ru/ https://www.facebook.com/groups/moscowjs/ https://www.facebook.com/groups/moscowjs/ Ilya S

tel 11y ago

They're a bit more than just reducers. Given that you always package them with initial state they're a little more like "left folds" [0] or "Moore machines" [1] (they're isomorphic). What's neat about this is that noticing that structure describes a whole bunch of ways to compose machines and folds—in particular, there's parallel composition like Flux suggests ("all stores receive the same actions", your linked example, https://gist.github.com/gaearon/d77ca812015c0356654f https://gist.github.com/gaearon/d77ca812015c0356654f) and sequential ("category-like") composition. [0] https://hackage.haskell.org/package/foldl-1.1.0/docs/Control-Foldl.html#t:Fold https://hackage.haskell.org/package/foldl-1.1.0/docs/Control... [1] https://hackage.haskell.org/package/machines-0.5.1/docs/Data-Machine-Moore.html https://hackage.haskell.org/package/machines-0.5.1/docs/Data...

nemanja 11y ago

Hey Dan, Redux looks awesome. I am using react-dnd and hot reloader on my current project and they are great. Thank you for all the great contributions you are making to the ecosystem. The idea of modeling the store as a reducer is clever. Complication I see is that my action creators are often not pure functions (i.e. there is generally a side effect to update the database and persist the change). However, given the focus of redux on improving the dev workflow, I suppose database updates/side effects could be mocked out. How would you handle this scenario? What would actually be awesome to have and go hand-in-hand with redux is an immutable write-only isomorphic database (for application state persistence), where you use the same initial state/reducer for redux and the database. Database stores initial state, logs actions and computes the current state using the reducer (and caches it) - much like redux on the client. Curious to hear what people think about this or if anyone has seen anything like it.

danabramov 11y ago
>Complication I see is that my action creators are often not pure functions (i.e. there is generally a side effect to update the database and persist the change). https://github.com/gaearon/redux#how-do-i-do-async https://github.com/gaearon/redux#how-do-i-do-async

Zagitta 11y ago

Thank you! I've been reading about Flux for a while now but your simple explanation just made it click