Win a copy of Node.js Design Patterns: Design and implement production-grade Node.js applications using proven patterns and techniques this week in the Server-Side JavaScript and NodeJS forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Ron McLeod
  • Rob Spoor
  • Tim Cooke
  • Junilu Lacar
Sheriffs:
  • Henry Wong
  • Liutauras Vilda
  • Jeanne Boyarsky
Saloon Keepers:
  • Jesse Silverman
  • Tim Holloway
  • Stephan van Hulst
  • Tim Moores
  • Carey Brown
Bartenders:
  • Al Hobbs
  • Mikalai Zaikin
  • Piet Souris

React Up & Running : Redux instead of Flux

 
Ranch Hand
Posts: 252
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi Stoyan,
Thank you for taking the time to answer questions.
I checked the table of contents on Amazon and it talks about Flux. As I use Redux, how easy or difficult it is to map the code samples in book to Redux from vanilla Flux ?
Thanks
 
author
Posts: 85
5
PHP
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
You'll have to poke around and let me know

All the code for the book is on github, you can probably start here https://github.com/stoyan/reactbook/tree/master/whinepad3 (the code for this little app).

There are tons of Flux implementations. In the spirit of "teach a man how to fish..." I thought I'll start from scratch and explain the concepts instead of teaching any one of the implementations, so then the readers can make an informed decision which implementation makes sense to them (or roll their own).

I intend to do a version of the app built in the book using Redux (time allowing) as a way to build upon and expand the book. These little extensions should be appendices to the book distributed freely.

If you're already building React apps with Redux though this book may not be for you, it's more for beginners.
 
Bhushan Jawle
Ranch Hand
Posts: 252
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Thank you Stoyan  
 
Sheriff
Posts: 67592
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
For the uninitiated, perhaps a short description of what Flux and Redux are would be informative?
 
Stoyan Stefanov
author
Posts: 85
5
PHP
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
So you've built an app composing a number of components. A is the overall App, B is Body component, C is Cool component inside B, ... F is Footer component - a sibling to B.



A can configure B and F using properties, e.g.



If A changes its mind because something happens in the app, it can reconfigure B (and React takes care of the most efficient way to do so without disrupting anything, say person typing in a search box inside C)

But what if B experiences a change that A should know about? One way is to let A provide callbacks for every type of change



But this can become verbose quickly. Also doesn't solve the problem where C wants to communicate a change to A (without passing through callbacks all the way). And definitely doesn't solve the problem of B communicating a change to F.

So you need events of some sort. Flux is an idea of how you may go about organizing those events and messages in a uni-directional sensible approach.

The idea in its simplest is - all components get their data from a Data store. And when something happens they call an Action. The Action updates the Store and all components (that care about the change) rerender with the new data in mind.



So Flux is just an idea and there are many implementations of it. Redux seems to be one of the most popular. In the book I build a simple one from scratch
 
Stoyan Stefanov
author
Posts: 85
5
PHP
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
gah, something happened with the second and third code snippets. I meant

<BB height="tall">

and

<BB ifyouclick="myonclick" ifyouhover="myonhoverhandler" ...>


(I think < B > is throwing things off so I changed to <BB>)
 
Power corrupts. Absolute power xxxxxxxxxxxxxxxx is kinda neat.
Thread Boost feature
https://coderanch.com/t/674455/Thread-Boost-feature
reply
    Bookmark Topic Watch Topic
  • New Topic