Questions tagged [reactjs-flux]

Flux is the application architecture that Facebook uses for building client-side web applications with React. It complements React's composable view components by utilizing a unidirectional data flow.

Flux is the application architecture that Facebook uses for building client-side web applications with React. It complements React's composable view components by utilizing a unidirectional data flow.

Flux applications have three major parts: the dispatcher(s), the store(s), and the view(s) (React components).

Flux eschews MVC in favor of a unidirectional data flow. When a user interacts with a React view, the view propagates an action through a central dispatcher, to the various stores that hold the application's data and business logic, which updates all of the views that are affected. This works especially well with React's declarative programming style, which allows the store to send updates without specifying how to transition views between states.

###Some popular implementations of Flux


Related tags

822 questions
1124
votes
8 answers

Why use Redux over Facebook Flux?

I've read this answer, reducing boilerplate, looked at few GitHub examples and even tried redux a little bit (todo apps). As I understand, official redux doc motivations provide pros comparing to traditional MVC architectures. BUT it doesn't…
VB_
  • 45,112
  • 42
  • 145
  • 293
339
votes
13 answers

Having services in React application

I'm coming from the angular world where I could extract logic to a service/factory and consume them in my controllers. I'm trying to understand how can I achieve the same in a React application. Let's say that I have a component that validates…
Dennis Nerush
  • 5,473
  • 5
  • 25
  • 33
248
votes
7 answers

What could be the downsides of using Redux instead of Flux

I just recently discovered Redux. It all looks good. Are there any downsides, gotcha or compromises of using Redux over Flux? Thanks
Ivan Wang
  • 8,306
  • 14
  • 44
  • 56
199
votes
6 answers

Where should ajax request be made in Flux app?

I'm creating a react.js application with flux architecture and I am trying figure out where and when a request for data from the server should be made. Is there a any example for this. (Not TODO app!)
Eniz Gülek
  • 4,275
  • 5
  • 17
  • 13
195
votes
18 answers

How to submit a form using Enter key in react.js?

Here is my form and the onClick method. I would like to execute this method when the Enter button of keyboard is pressed. How ? N.B: No jquery is appreciated. comment: function (e) { e.preventDefault(); this.props.comment({ comment:…
Istiak Morsalin
  • 10,621
  • 9
  • 33
  • 65
147
votes
12 answers

How to make a rest post call from ReactJS code?

I am new to ReactJS and UI and I wanted to know how to make a simple REST based POST call from ReactJS code. If there is any example present it would be really helpful.
Divya
  • 1,577
  • 3
  • 12
  • 8
136
votes
3 answers

In Flux architecture, how do you manage Store lifecycle?

I'm reading about Flux but the example Todo app is too simplistic for me to understand some key points. Imagine a single-page app like Facebook that has user profile pages. On each user profile page, we want to show some user info and their last…
Dan Abramov
  • 264,556
  • 84
  • 409
  • 511
132
votes
10 answers

how to cancel/abort ajax request in axios

I use axios for ajax requests and reactJS + flux for render UI. In my app there is third side timeline (reactJS component). Timeline can be managed by mouse's scroll. App sends ajax request for the actual data after any scroll event. Problem that…
Rajab Shakirov
  • 7,265
  • 7
  • 28
  • 42
124
votes
6 answers

Should flux stores, or actions (or both) touch external services?

Should the stores maintain their own state and have the ability to call network and data storage services in doing so ...in which case the actions are just dumb message passers, -OR- ...should the stores be dumb recipients of immutable data from the…
plaxdan
  • 1,343
  • 2
  • 9
  • 11
119
votes
6 answers

Strategies for server-side rendering of asynchronously initialized React.js components

One of the biggest advantages of React.js is supposed to be server-side rendering. The problem is that the key function React.renderComponentToString() is synchronous which makes it impossible to load any asynchronous data as the component hierarchy…
tobik
  • 7,098
  • 7
  • 41
  • 53
107
votes
4 answers

Webpack-dev-server serves a directory list instead of the app page

I can only see the actual app under /public. The configs in webpack.config.js are below: var path = require('path'); var webpack = require('webpack'); module.exports = { entry: [ 'webpack-dev-server/client?http://localhost:8080', …
Jason Lam
  • 1,342
  • 3
  • 14
  • 17
101
votes
8 answers

Expected corresponding JSX closing tag for input Reactjs

While creating a component in Reactjs with input fields error occurs Error: Parse Error: Line 47: Expected corresponding JSX closing tag for input at http://localhost/chat-react/src/script.js:47:20
var Main = React.createClass({ render:…
Sajin M Aboobakkar
  • 4,051
  • 4
  • 30
  • 39
95
votes
6 answers

What are differences between redux, react-redux, redux-thunk?

I am using React + Flux. Our team is planning to move from flux to redux. Redux is very confusing for me coming from flux world. In flux control flow is simple from Components -> actions -> Store and store updates back components. Its simple and…
Chetan Motamarri
  • 1,204
  • 2
  • 12
  • 15
90
votes
4 answers

At what nesting level should components read entities from Stores in Flux?

I'm rewriting my app to use Flux and I have an issue with retrieving data from Stores. I have a lot of components, and they nest a lot. Some of them are large (Article), some are small and simple (UserAvatar, UserLink). I've been struggling with…
Dan Abramov
  • 264,556
  • 84
  • 409
  • 511
75
votes
7 answers

How to download fetch response in react as file

Here is the code in actions.js export function exportRecordToExcel(record) { return ({fetch}) => ({ type: EXPORT_RECORD_TO_EXCEL, payload: { promise: fetch('/records/export', { credentials:…
Rafael Korbas
  • 2,213
  • 3
  • 19
  • 30
1
2 3
54 55