FAQ Database Discussion Community


Should every object in the store state be immutable?

javascript,reactjs,immutability,flux,immutable.js
I am learning React.js and Flux, and I understand that is better to keep the object immutable because comparing them is O(1). My situation is this: I have a store, which has a _state object, that is a map (I'm using Immutable-js). That _state has some booleans, some strings and...

react-router and flux - clearing state while transition

reactjs,reactjs-flux,flux,react-router
I am using react-router with the flux architecture (facebook's flux implementation). Currently in my system I have route that says "chat/:topic". When the user is entering this component, I am creating a subscription (using action creation, on componentWillMount) to a websocket server, and I am removing the subscription on componentWillUnmount....

how to render through a simple for-loop in Reactjs?

javascript,reactjs,flux
I have a simple react component defined below React.createClass({ generateContent:function(){ for(i = 1;i<=100;i++) if(i%2 == 0) { return <li>Even!</li> } else{ return <li>Odd!</li> } }, render:function(){ return (<ul> {this.generateContent()} </ul>) } }) While Rendering, The component returns the first statement of the for loop(<li>Odd</li>) and then exits. I'd like something...

Whose job is it in Flux/React to set the page title?

javascript,reactjs,reactjs-flux,flux
Let's say I start with the Facebook flux-chat example. There are multiple threads each with messages. I want to write code so that when I click to navigate to a different thread, I change the page title accordingly. Who sets the page title? The click handler in the threads list...

Stores for reusable React+Flux form component (one component for multiple forms with different fields)

javascript,reactjs,reactjs-flux,flux
In an application I'm working on I have a couple different forms with different fields. I'd like to create one reusable component to use for each form. Form #1 could have the following fields: email, password Form #2 could have the following fields: mobile messaging, tablet messaging, desktop messaging, background...

using flux architecture pattern with server-client application

client-server,flux,electron
I'm trying to build a Desktop app using Github's Electron Framework, which separates a "main" io.js process from a "render" JS process (BrowserWindow). I think of the "main"/"renderer" processes as analogous to a server and client (let me know if this is mistaken). I'm confused about how to apply the...

Does accessing information returned from an action creator in a component break Flux?

javascript,reactjs,flux
When performing an action in a component does it break the Flux pattern to access the promise returned from the action creator within the component? Action Creators class MyActionCreators extends Marty.ActionCreators { create() { this.dispatch(MyActionConstants.CREATE_ACTION); return MyActionAPI.create() .then(res) { this.dispatch(MyActionConstants.CREATE_ACTION_DONE); return res; }; } } Compoment class MyCompoment extends React.Component...

Reflux actions global debugging

javascript,reactjs,flux,refluxjs
Is there a way how to globally console.log() all the fired actions in Reflux? Ideally prints theirs parameters at the same time.

React Flux dispatcher vs Node.js EventEmitter - scalable?

node.js,design-patterns,reactjs,flux,eventemitter
When you use Node's EventEmitter, you subscribe to a single event. Your callback is only executed when that specific event is fired up: eventBus.on('some-event', function(data){ // data is specific to 'some-event' }); In Flux, you register your store with the dispatcher, then your store gets called when every single event...

difference between componentDidMount and getInitialState in Reactjs

facebook,reactjs,flux
I understand that getInitialState is called once in the component's lifecycle and componentDidMount is called when the component is rendered. So does that mean both will get called just once in the component's lifecycle? What's the difference?...

Should I recreate all my page from scratch (html and css) if I begin using React/flux?

javascript,reactjs,reactjs-flux,flux
I have alreayd built a few pages of my app. As i need a javascript framework and sub second dynamic pages I think I'll try React/Flux. The thing is despite much reading, I don't fully understand if you can keep my EXISTING codebase (html/js) and only use React (jsx ,...

How and where does updating and retrieving of data happen in the FLUX pattern?

facebook,reactjs,reactjs-flux,flux
I have been pondering about this for a while now and been unsuccessful in finding any information on the topic of subsequent api (ajax) requests. Let's say we have list of users and one of them is updated. After updating the user, I would like to retrieve the entire, updated...

De-bounce calls based on dispatch loop in React

javascript,reactjs,reactjs-flux,flux
Recent React.JS Conf had Flux panel and Kyle Davis mentioned de-bounce calls based on dispatch loop optimization. Can anyone provide some examples on how to implement that?

How to store Configuration file and read it using React

javascript,reactjs,flux
I am new on react.js I have implemented one component in which I am fetching the data from server and use it like, CallEnterprise:function(TenantId){ fetchData('http://xxx.xxx.xx.xx:8090/Enterprises?TenantId='+TenantId+' &format=json').then(function(enterprises) { EnterprisePerspectiveActions.getEnterprise(enterprises); }).catch(function() { alert("There was some issue in API Call please contact Admin"); //ComponentAppDispatcher.handleViewAction({ // actionType: MetaItemConstants.RECEIVE_ERROR, // error: 'There was a problem...

Why should addChangeListener be in componentDidMount instead of componentWillMount?

javascript,reactjs,reactjs-flux,flux
I saw this line as an answer to another question on here: "componentWillMount should be componentDidMount, or else you'll leak event emitters in node." and I don't really understand it. Can someone explain with more detail? More info: Building a react application with flux, as part of the initial render,...

Can I also slide content with Fluid Powered TYPO3 (fed flux fluidcontent)

typo3,slide,fluid,flux,col
I try to slide content elements at my TYPO3 Backend (v6.2) with Fluid Powered TYPO3. So I don't have CSS_Styled_content included. http://wiki.typo3.org/Content_Slide Example: 10 < styles.content.getRight 10.slide = -1 Especially I'd like to slide my content from the colPos=0 'Slider' to the Pages below. Is this possible with FLUID /...

When to load an async relation with Flux

reactjs,reactjs-flux,flux
Let's say you have a Pet component displaying a pet resource. You also have an owner resource that belongs to pet via an ownerId attribute. Where in the Pet component should you load the owner resource? const Pet = React.createClass({ getInitialState() { return { pet: PetStore.get(this.props.petId) }; }, componentDidMount() {...

What's the difference between a store and a model?

javascript,reactjs-flux,flux
In flux based applications there is a concept called a store. I've been trying to determine what features a store has and how they differ from models? Does server communication happen in a store? Where does that occur? Are they always singletons?

Where do sockets fit into the Flux unidirectional data flow?

javascript,websocket,socket.io,reactjs,flux
Where do sockets fit into the Flux unidirectional data flow? I have read 2 schools of thought for where remote data should enter the Flux unidirectional data flow. The way I have seen remote data for a Flux app fetched is when a server-side call is made, for example, in...

What is point of emitChange, addChangeListener, and removeChangeListener in flux

reactjs-flux,flux
In the Flux examples, all the Store classes have functions for emitChange, addChangeListener, and removeChangeListener. They are the same in all the examples, eg: https://github.com/facebook/flux/blob/master/examples/flux-chat/js/stores/ThreadStore.js and https://github.com/facebook/flux/blob/master/examples/flux-todomvc/js/stores/TodoStore.js If they are the same, why doesn't the library provide some common code? Why have this boilerplate?...

Can flux actions access stores?

reactjs,flux
Can Flux actions access stores? I recently got a code review comment asking me to pass a certain value in from a React component, instead of getting it from the store directly in the action. This would change Flux's data flow from this: View->Action->Dispatcher->Store-| ^-----------------------------< to this View->Action->Dispatcher->Store-| ^------^----------------------< It...

Changing state in 'uncle' component?

reactjs,flux
On one of my routes, I have a list of items, which you can click on to get more details in a 'detail' view. Both the list and the detail view are shown simultaneously. hierarchy: A (page wrapper component) / \ (list view) B C (detail view) / | \...

Should generic React List component receive props or listeners from parent?

javascript,reactjs,flux
This is a somewhat more style/theory question as I THINK both methods will work. Here is the scenario: I have an InfiniteList component that I want to keep generic. It gets the current list of all item IDs from the parent, then figures out what ones it has to actually...

Understanding how to implement a Flux architecture using Flummox

reactjs,reactjs-flux,flux,flummox
I currently have a very simple React app that uses state to determine a couple of views. Clicking on the submit element fires a simple call to an endpoint passing either login or registration credentials. I could continue down this road to use React and JSON returned from the server...

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

javascript,reactjs,reactjs-flux,flux
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 to the user's actions? Can I...

Error: Cannot resolve module 'module' in path/…/rewire/lib

reactjs,flux
I am using rewire prior to require method in my React/Flux app, to load components. But after installation I got this error: ERROR in ./~/rewire/lib/rewire.js Module not found: Error: Cannot resolve module 'module' in /Users/path/node_modules/rewire/lib @ ./~/rewire/lib/rewire.js 1:13-30 ERROR in ./~/rewire/lib/rewire.js Module not found: Error: Cannot resolve module 'fs' in...

Passing props from grandchildren to parent

javascript,reactjs,flux
I have following React.js application structure: <App /> <BreadcrumbList> <BreadcrumbItem /> <BreadcrumbList/> <App /> The problem is, when I click on <BreadcrumbItem /> , I want to change a state in <App /> I used callback to pass props to <BreadcrumbList/> but that`s how far I got. Is there any...

React flux reset store value on route change

javascript,reactjs,reactjs-flux,flux,react-router
I have simple implementation of react and flux. i am creating new post with actions and stores but the problem that if the user going to another route and come back the this.postAdded still the same value. The store: class NewPostsStore { constructor() { this.title = ''; this.body = '';...

ReactJS: What is the idiomatic way to fetch and update data through a form?

javascript,reactjs,flux
I'm trying to wrap my head around the best way to update data through an HTML form. Take the example from the ReactJS webpage: https://facebook.github.io/react/docs/tutorial.html Say you wanted to implement the ability for a user to edit a comment that she had posted in the past (i.e. not in the...

Flux: Higher order components to set up store listeners

reactjs,reactjs-flux,flux
Following this article Mixins Are Dead. Long Live Composition, I've set up a Pet component listening to pet and owner stores user a higher order component. But how would one pass an owner_id from the pet resource into connectToStores? Is this simply a case where mixins are superior? Pet =...

Accessing react-router from flummox action/store

reactjs,flux,react-router,flummox
I want to be able to make an API call in a Flummox action and transition differently depending on the response. I can pass the router into the action call but am looking for advice on a potentially better way. UPDATE: The correct answer is below but I wanted to...

Fluxfield for internal Link with pagetree

typo3,fluid,typo3-6.2.x,flux
How can I create a fluxfield to create a link to another page, where the user can chose the page in a pagetree. Something like the Modify Linkfrom the RTE. Is there something? Or how else would I create a field for a internal link? Just an inputfield where the...

React && Flux confused about where to put data

reactjs,flux
I'm developing a web app with React + Flux. But sometimes, I am confused about where to put the data of a component. Flux says that we should keep the data in the store. When the data changed, store should emit a change event, then the react components which listen...

how to set ajax data fetching in flux?

javascript,reactjs,reactjs-flux,flux
I'm working on my first FLUX app and stumbled upon this problem. I want to get data from the server and pass it down to my component. Say i have a component method ... loadMore() { AppActions.getCards(); } ... and a store: $.ajax({ url: '../data.json', dataType: "json", success: function (data)...

React-Flux: Error with AppDispatcher.register

javascript,jsx,reactjs-flux,react-jsx,flux
I am trying to set up the most basic app in Flux-React. Its sole goal to is fire an Action, which gets sent through the Dispatcher to a Store that has registered with the Dispatcher. The store the logs the payload to Console. Everything besides the Store is working well,...

ReactJS controlled component and immutable data

reactjs,reactjs-flux,flux,immutable.js
I wonder how controlled components (e.g an input box) can be implemented, if the data of an app is build upon immutable data and the app uses "===" equality operators in shouldComponentUpdate() for fast re-rendering. Let's assume deeply nested data and a controlled component somewhere deep in the hierarchy: When...

In React JS, when should you use a store vs directly manipulating the view's state?

javascript,reactjs,flux,refluxjs
Now I understand the concept of stores as the source of truth for a React app, but it seems that sometimes using stores is overkill, especially in UI-only situations. For example, say I'm making an app which contains a list of movies. The app contains a search bar which lets...

Building Flux/React application without NodeJs EventEmitter

javascript,node.js,go,reactjs,flux
Hi I'm trying to build a Flux/React application with a go-lang back-end. I have been following a tutorial I found here. But I have a problem when building the store. In the tutorial something like this is used to create a base for the store. var ProductStore = _.extend({}, EventEmitter.prototype,...

In a Flux app, what's the right way handle API requests other than the initial data load?

reactjs-flux,flux
When using Flux, what's the right way handle AJAX requests other than the initial data load? I'm building basic twitter-clone; I have an API utility that loads the initial data and then calls an action (tweetActions.loadTweets(data)), which the TweetStore is listening for. But what's the pattern for, say, when a...

How to handle save states in React/Flux?

reactjs,reactjs-flux,flux
I've been working with react/flux for a few weeks now and while I feel like I've got a pretty good handle on everything from async loading to updating props/states/etc, one thing that is still bothering me is how to handle save states. For example, when loading data, I just have...

Reusability/Scalability issues with react-flux app

javascript,reactjs,reactjs-flux,flux
The question: Is there any way to have a standard flux workflow - using Actions and Stores inside of a component and still be able to use this component for multiple different purposes, or if not is there any way to have complex nested structure in flux-react app without propagating...

Listen to Reflux actions outside of stores

javascript,reactjs,eventemitter,flux,refluxjs
I'm trying to figure out how to fit ajax calls into the flux/reflux way of doing things. From the scraps of info I've found online it seems correct to separate the API logic from the stores. Starting there, I've created a client API that makes requests to the server. Now...

Fluid Powered TYPO3 FLUX Fluidcontent - No Output in Frontend?

output,typo3,frontend,fluid,flux
I've made a TYPO3-Installation 6.2.9 with Fluid powered TYPO3 - the first steps with the Pre-configured Distribution "Site" were fine. My Site/Page-Template is installed and I added all the TypoScript stuff. Now I want to use FLUIDCONTENT (FCE) with FLUX. I've added a new Template-File TeaserOne.html and I try to...

Should I pass all the state in every change from store to component?

javascript,performance,reactjs,reactjs-flux,flux
I am new on React and Flux and I am making an app that will have an input (like the name or the title), and below a list of n things. How should I handle the event listeners? I saw in the TODO example of flux (https://github.com/facebook/flux/blob/master/examples/flux-todomvc/) that they use...

Does Flux always have to use browserify?

reactjs,browserify,reactjs-flux,flux
I've read theoretical overviews of the flux application architecture. I know flux and react go hand in hand, but all the getting started tutorials use browserify right away. What does browserify provide to react? Why is browserify necessary for react/flux to work?

props is not initialized in react component

reactjs,flux
I have developed a Component. In it, I am loading the data based on an Id which is passed to it like; my Item Component code looks like ItemStore.CallItem("TenantId",this.props.MetaItemId); and my calling page code looks like <div className="box-body table-responsive no-padding list-relations" id="configureMM"> <Item MetaItemId={11} /> </div> <div className="box-body table-responsive no-padding...

Flux and WebSockets

javascript,websocket,reactjs,flux
I'm using Flux and WebSocket in my Reactjs application and during implementation I've encountered some problems. Questions: Assuming I have a set of a set of actioncreators and a store for managing the WebSocket connection, and that the connection is started in a actioncreator (open(token)), where should I put my...