3

I am new to React.js and I am enjoying it a lot. I came across the Flux architecture while reading the React.js documentation. I understand that Flux is just a pattern and that there are many Flux implementations out there – including Facebook's own. I also know that React.js can be used without any Flux implementation.

My question is: is it safe to say that React.js has its own (small) Flux implementation embedded within it? In my opinion, I don't see any other way for React.js to achieve its uni-directional data-flow without having its own Flux implementation – which is, of course, replaceable with other Flux implementations.

Alex P
  • 5,942
  • 2
  • 23
  • 30
Imran Latif
  • 985
  • 8
  • 21

2 Answers2

3

Flux is pattern for handling application state and React is just view library. You don't have to use Flux with React, but it's preferred way.

Most popular Flux implementation seem to be Redux nowadays.

luboskrnac
  • 23,973
  • 10
  • 81
  • 92
  • Yeah I totally got this. I' am basically thinking from some other perspective. In my opinion, when we listen for events on `React` components and we add action-handlers and in those action-handlers we manually call `setState` to update corresponding state(s), we are in some way implementing a very limited functionality of `Flux`. Although there are no proper `Dispatchers`, `Stores`, but our action-handlers are serving as both by listening for changes and updating component's state. I might not be correct in my way of thinking but thats how I' am mapping things. – Imran Latif Feb 07 '16 at 22:01
  • React community slowly lean towards stateless components, where each state you are considering to store into `this.state` should be rather handled by Flux store. – luboskrnac Feb 07 '16 at 22:04
  • As per your answer I have concluded, `React` like any other view library has it's own way of managing application state. But to get benefits of uni-directional data-flow (which `React` hasn't by-default), we need to use some `Flux` implementation like Facbook's Flux, Redux, Reflux etc. Is my understanding correct? – Imran Latif Feb 07 '16 at 22:14
  • Thanks for your awesome answer and comments. I' am marking your answer as the correct one :-). Thanks – Imran Latif Feb 08 '16 at 14:16
1

The picture below is an explanation of what is, and what is not in react:

  • The green stuff = part of React: a library to render a component tree in a DOM (or somewhere else).
  • Unidirectional flow means that react is made for/ allows only top-down updates: any component can render/ update/ change itself (through change in state) or its children (through passing props down the tree).
  • The blue parts are part of the Flux-pattern. React does not have any code/ library components for this.

enter image description here

The elements of flux make the circle complete: they allow react components to trigger actions, which in turn update stores, and can allow for (top) components to re-render based on changes in stores. There are libraries (e.d. redux, reflux, alt) that implement the various elements of the flux architecture.

wintvelt
  • 13,855
  • 3
  • 38
  • 43