In Flux architecture, how do you manage client side routing / url states?

[Update] After working on a bunch of React/flux applications, I’ve come to the conclusion that I prefer for routing to be handled separately and orthogonally to flux. The strategy is that the URL/routes should determine which components get mounted, and the components request data from the stores based on the route parameters and other application …

Read more

When to use .toJS() with Immutable.js and Flux?

Ideally, never! If your Flux stores are using Immutable.js then try to maintain all the way through. Use React.addons.ReactComponentWithPureRenderMixin to achieve a memoization performance win (it adds a shouldComponentUpdate methods). When rendering, you may need to call toJS() as React v0.12.x only accepts Array as children: render: function () { return ( <div> {this.props.myImmutable.map(function (item) …

Read more

How to structure Redux components/containers

In the official examples we have several top-level directories: components for “dumb” React components unaware of Redux; containers for “smart” React components connected to Redux; actions for all action creators, where file name corresponds to part of the app; reducers for all reducers, where file name corresponds to state key; store for store initialization. This …

Read more

Redux: Opinions/examples of how to do backend persistence?

Definitely persist the state of your reducers! If you persisted a sequence of actions instead, you wouldn’t ever be able to modify your actions in your frontend without fiddling around inside your prod database. Example: persist one reducer’s state to a server We’ll start with three extra action types: // actions: ‘SAVE’, ‘SAVE_SUCCESS’, ‘SAVE_ERROR’ I …

Read more

Automatic redirect after login with react-router

React Router v3 This is what I do var Router = require(‘react-router’); Router.browserHistory.push(‘/somepath’); React Router v4 Now we can use the <Redirect>component in React Router v4. Rendering a <Redirect> will navigate to a new location. The new location will override the current location in the history stack, like server-side redirects. import React, { Component } …

Read more