React: Rendering a list in reverse order
javascript,reactjs,refluxjs,khan-academy,reactcsstransitiongroup
You shouldn't use index as key, it defeats the purpose. For example, if you add an item to the beginning of the array, react will detect only one new key - the last one. All other components would be reconciled according to their keys. You should use unique id of...
Reflux store and actions flow logic: how to pass data from a store to another store
In the Reflux philosophy, stores listening to other stores is an acceptable and supported pattern, just use the listenTo method in store B and listen to store A.
In React JS, when should you use a store vs directly manipulating the view's state?
javascript,reactjs,flux,refluxjs
As your examples indicate, not using a store is simpler, and arguably correct in this case. A weak question to answer is: Does any other component need to know about the search results? A better question is: Might some other component need to know about the search results? Consider that...
React+Reflux: Passing Variables to Data Stores
After finally posting my question here I think I may have figured out where I was going astray all along. I was thinking in terms of passing the category Id to the store to filter the data therein when all I really need to do is take the full collection...
Reflux store is in one situation not listening to an action
The problem has been solved by 'requiring' the store that should handle te action from the JS file with the view that initiates the change of the email address (calls the CustomerActions.setEmail action). This solution does not correspond with my expectations. I expected that, because the store already is being...
own timer component with react, reflux not working
I fixed it thanks to: How to Make React.js component listen to a store in Reflux I have to trigger my time: var TimeStore = Reflux.createStore({ listenables: TimeActions, init() { this.time = ''; }, onCurrenttime() { this.trigger({ time : '13:47' }); } }); ...
Uncaught TypeError: undefined is not a function in RefluxJS
javascript,jquery,reactjs,refluxjs
chatRef appears to be an event emitter with at least one custom function (push). You could mock it like this: // you'll need to include an event emitter library var chatRef = new EventEmitter(); chatRef.push = function(data, cb){ // if push emits a value event? not sure if it does...
Django Rest Framework + React + Reflux: Can't GET new objects
django,reactjs,django-rest-framework,refluxjs
The problem ended up being with the Cache-Control header of the response having a max-age=600. Changing that to max-age=0 solved the issue. In this situation, it doesn't make much sense to provide a cached response, so this I added this to my serializer's ViewSet: def finalize_response(self, request, *args, **kwargs): response...
Refreshing children state from parent React
My approach is that you should have structure something like this in parent's render: <ParentView> { this.props.rows.map(function(row) { <ChildRow props={row.props} /> }).bind(this) } </ParentView> And then on row.props you have the information whether current row item is checked or not. When parent checkbox is toggled, you populate all the row.props...
Reflux actions global debugging
javascript,reactjs,flux,refluxjs
Like Cory Danielson said, Reflux uses EventEmitter. And you can insert your own EventEmitter-implementation like this: Reflux.setEventEmitter(require('events').EventEmitter); So you want to inject an EventEmitter constructor there that has debugging enabled, something like this: var EventEmitter = require('events').EventEmitter; function DebugEventEmitter() { var realEmitter = new EventEmitter(); var origEmit = realEmitter.emit; realEmitter.emit...
How to get initial state with AJAX in a Store with Reflux
There are a number of problems with this code: getInitialState: function() { $.getJSON('/sample').done(function(result){ this.list = result; }); return this.list; } First off, your returning this.list before the Ajax request comes back with the data. That effectively means that you are returning undefined from that function. The second problem is that...
Listen to Reflux actions outside of stores
javascript,reactjs,eventemitter,flux,refluxjs
The store is the glue between your actions and the API. Just like answered in http://stackoverflow.com/a/27487312/274483 The difference in your case is that you don't perform the ajax request directly in the store, but go through your API-class, populate the store with the data returned from your API and trigger...
How to deal with hierarchical data with Reflux stores?
Yes, it is perfectly reasonable to call actions from a store. I see actions as initiators of data flows and I consider exceptional flows as seperate ones. A good example is a CRUD store that also handles AJAX calls (to CRUD the data with server-side). The store will trigger the...
Animating Data Store change
What browsers do you target? Probably you can achieve your goal fast with CSS3? Use this on your div element: transition: width 2s, transform 2s; ...
How to Make React.js component listen to a store in Reflux
Your store doesn't emit anything. You need to call this.trigger: global.todoListStore = Reflux.createStore({ listenables: [TodoActions], onCostChange: function(){ this.trigger('test1'); } }); docs...
React routing and persistence on page refresh
javascript,reactjs,react-router,refluxjs
I've been caching each Store in sessionStorage when its emitChange() fires, and initializing the store from sessionStorage if cached data exists, or null values otherwise. This seems to work provided that the views can handle null values, which is probably a good idea anyway (it sounds like this is your...
React/reflux how to do proper async calls
javascript,asynchronous,reactjs,jsx,refluxjs
I am using Reflux as well and I use a different approach for async calls. In vanilla Flux, the async calls are put in the actions. But in Reflux, the async code works best in stores (at least in my humble opinion): So, in your case in particular, I would...
Listening directly to Reflux Actions in Component
There are different approaches to this. For example, in Reflux it's very easy to listen directly to actions if you choose to, since each action is actually a "dispatcher". However, the general, purist Flux principle is that only stores register with the dispatcher and that components only listen to store...
Adding resolver to React-router
You can do something like this in React Router by adding a static (using createClass) or a property on the component class (when using ES6 classes) and then executing them with React Router. var Component1 = React.createClass({ statics: fetchData: function(params) { return API.getData(params); }, // ... }); class Component2 extends...
React not rendering data coming from reflux store
The issue is getItems does not return an array of rendered items. So I would change it to something like this: var ItemList = React.createClass({ mixins: [Reflux.connect(SearchStore,"data")], renderItems() { var output = []; if (typeof this.state.data !== 'undefined' && this.state.data !== '404') { for (var key in this.state.data) { if...