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
7
votes
7 answers

Stores' change listeners not getting removed on componentWillUnmount?

I am coding a simple app on reactjs-flux and everything works fine except I am receiving a warning from reactjs telling me that I am calling setState on unmounted components. I have figured out this is because changelisteners to which components are…
Gerard Clos
  • 1,080
  • 2
  • 12
  • 21
7
votes
1 answer

How to handle multiple stores of same type in Flux / ReactJS?

I'm new to Flux/React and I'm having a hard time understanding some of the fundamental architecture decisions: I know all stores are meant to be singletons, but are they all created at app start, or can the lifetime of a store be smaller, specific…
Brent Traut
  • 5,614
  • 6
  • 29
  • 54
7
votes
1 answer

Who is responsible to fetch data from server in a flux app with caching?

In the flux webchat example application and in the README diagram, it seems like the action creator should retrieve the data from the server. The problem I see is that no fetch might be required if the data is already in the store. The store is…
amirouche
  • 7,682
  • 6
  • 40
  • 94
7
votes
1 answer

Is triggering an action in the store bad practice?

Stores are supposed to handle the events triggered by actions and emit the change to the listening view controllers. Is it ok for them to trigger actions as well, for example in the callback of a request or directly in the store's registered…
medowlock
  • 1,469
  • 1
  • 19
  • 25
7
votes
1 answer

Flux waitFor() and async operation, how to model.

I'm using pouchDB as a local database for an app. I want to query the results from PouchDB and load this into React.js. However, even though I'm using the waitFor() method the results of PouchDB query return too late. I think I don't understand the…
swennemen
  • 945
  • 1
  • 14
  • 24
7
votes
1 answer

Using React's immutable helper with Immutable.js

I'm working on a flux application and am considering adopting immutable.js to maintain state. I saw that react supplies its own helper for updating immutable objects (http://facebook.github.io/react/docs/update.html), but couldn't tell how it was…
Fenster
  • 340
  • 3
  • 9
7
votes
2 answers

Why should I use Actions in Flux?

An application that I develop was initially built with Flux. However, over time the application became harder to maintain. There was a very large number of actions. And usually one action is only listened to in one place (store). Actions make it…
iofjuupasli
  • 3,818
  • 1
  • 16
  • 17
7
votes
2 answers

Can I apply Flux architecture with ReactJS.net?

How create flux architecture in asp.net using reactjs.net ? I will have several files. Jsx, how will I manage to be all rendenizador by the server? In this example => Link, it creates using asp.net but not render with server
user3892418
  • 71
  • 1
  • 3
6
votes
2 answers

Dowload PDF as a stream of bytes

I have web API that provides stores files as a stream of bytes. The response is already fetched and saved in the state but now I want to download the file from my react application onClick of a button. I am doing it as follow: downloadContract(…
user1912404
  • 386
  • 4
  • 11
  • 26
6
votes
2 answers

React-native navigation experimental example?

I started using react-native few weeks ago. For my first app, I used navigator for the navigation with its navigationbar component to display title and left/right hand side buttons. After reading facebook has dropped its support for the navigator…
6
votes
0 answers

Need to maintain scroll position when back button is pressed using history goBack function

I have a list of products and when particular product is clicked it opens a detail view page. I am using "this.history.goBack()" which is triggered by a button to go back to list of products. My problem is that every time i hit back button product…
rosnk
  • 1,068
  • 1
  • 14
  • 36
6
votes
1 answer

React Form controlled by a Flux Store (Best practice?)

So I have a big component that would be my form:
{more components here} This form component is…
Ferran Negre
  • 3,712
  • 3
  • 34
  • 56
6
votes
1 answer

Confusion about Models in Backbone + React application

Here's an example that uses Backbone with React. He defines a Model: var _todos = new Backbone.Model(); And then adds two functions to it: var TodoStore = _.extend(_todos, { areAllComplete: function() { return _.every(_todos.keys(),…
pushkin
  • 9,575
  • 15
  • 51
  • 95
6
votes
2 answers

how to remove / unmount nested react components

I'd like to unmount a single react component, which belongs to a parent component containing three components total. The parent component has this render function: render: function () { return (
dcochran
  • 1,055
  • 2
  • 9
  • 15
6
votes
3 answers

jQuery UI Sortable with React.js buggy

I have a sortable list in React which is powered by jQuery UI. When I drag and drop an item in the list, I want to update the array so that the new order of the list is stored there. Then re-render the page with the updated array. i.e.…
Ben
  • 5,085
  • 9
  • 39
  • 58