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
0
votes
1 answer

Call api from a store and bind data to component state in ReactJS/flux

Using React-router-component, i have set to load my home page with a component called gigist which is as folows: var React = require('react'); var AppStore =require('../../stores/app-store.js'); var GigsListItem = require('./giglistitem.js'); var…
Nithish Reddy J
  • 155
  • 3
  • 16
0
votes
1 answer

How do I handle API calls with actions in the React.js Flux architecture and McFly?

I am building my first React.js Flux example, I am using McFly. You type a ticker symbol into an input box(I've been using 'F' & 'K' because of issues with debouncing), then I use a mini-api to get the stock's info and then display the price. The…
EasilyBaffled
  • 3,822
  • 10
  • 50
  • 87
0
votes
1 answer

Setting a flag in component state directly without getting into a full Flux cycle

I started with FLUX very recently, and need some advise on how should I update the component state and the store. I need to set a toggle flag which is bonded to an onclick event, from what I understand in Flux architecture, I should call an action…
user3568480
  • 3
  • 1
  • 3
0
votes
1 answer

can i use action in Flux to control routes, HOW?

I am writing a authentication module in Flux, actions : auth,auth_success,auth_error. I am thinking when action auth_error occur, the router will go to '/login'. When action, action, auth_success occur, the router will go to '/dashboard'. But it…
Chopper Lee
  • 1,557
  • 2
  • 11
  • 30
0
votes
1 answer

React-router transition always creates handler

I just started, so I don't know if this is desired behavior or if I have missed something. I'm using the Flux architecture (specifically Reflux but that should not be relevant). In my super-simple test app: var App = React.createClass({ render:…
blackwood
  • 362
  • 3
  • 12
0
votes
1 answer

Handling multiple async calls with flux

I have a Calendar component which, when rendered with a certain prop called LoadOnMount needs to call the server to load a set of flights. The problem is that I update the calendar by listening to the CalendarStore's Events.UPDATE event, which is…
nicohvi
  • 2,270
  • 2
  • 28
  • 42
0
votes
1 answer

How to update state of parent's parent component in react?

I'm playing around with fb's tutorial on comment box. Let's imagine I've added functionality to delete comments, so I will have something like this in Comment component - onClick={this.handleCommentDelete} How do I trigger change of the state of…
Leg0
  • 510
  • 9
  • 21
0
votes
1 answer

How to properly wire async callbacks with form manipulations in react?

Was recently building similar component to facebook's comment tutorial, so I've picked the same code and realized it lacks callback-based input clearing. So what's the best way to wire that into react/flux architecture? So _id & name inputs are…
Leg0
  • 510
  • 9
  • 21
0
votes
1 answer

How to resolve dependency between actions within a Store

My Store registers 2 actiontypes as follows: Dispatcher.register(function (action) { switch (action.type) { case 'loadCar': loadCar(); break; case 'loadTyres': loadTyres(); break; …
FranBran
  • 1,017
  • 2
  • 11
  • 32
0
votes
1 answer

How do I test a ReactJS Flux Action (in Jest) from the component test?

I have a component that on the click of a button calls a flux action: onSend(event) { MessageActions.sendMessage(this.state.currentMessage); }; Now, I want the test to basically be able to simulate the button click (I know how to do that). And on…
TheStoneFox
  • 3,007
  • 3
  • 31
  • 47
0
votes
1 answer

How to connect Flux to Sinatra API

I'm using React for a web application, and I've started learning about Flux. I like the concept of a unidirectional data flow, but I'm having some problems understanding how that connects to an API. I have a back end written in Sinatra. What I'm…
Hugo
  • 2,186
  • 8
  • 28
  • 44
0
votes
1 answer

Reactjs with Flux: when and where to initialize a Timer utility in a Flux application

I have three different things going on in my application: A Timer is set at 10 second intervals and does't stop until asked to An async Api Utility module triggers a function to call an Api once the timer starts over again. I have a Component (w/…
adamellsworth
  • 361
  • 1
  • 3
  • 15
0
votes
1 answer

Flux/React design pattern

I'm writing a small Flux/React app that will display images in a gallery. I have a timer in a Flux store that pulls new images from a web service every 30 seconds and adds them to a list in the store, and then emits a change down so views can…
0
votes
1 answer

Extended event emitter functions across stores are clashing in Flux

I have multiple Flux stores. Now clearly, all of them are extending the same Event emitter singleton. This has led to events across stores clashing with each other (even the most common, emitChange). There seems to be no difference between doing…
Varun Arora
  • 332
  • 4
  • 8
0
votes
2 answers

ReactJS/Flux - Listening for store progress events

I'm working on a ReactJS + Flux application. The application allows a user to submit a post. This post may take a number of seconds to upload to the server, and I want to display a progress bar. The current flow is: action method called with post…
iLoch
  • 741
  • 3
  • 11
  • 32