Migrating from Refluxjs to Redux

Unless you have been living under a rock. I'm sure you are aware of all the buzz behind React. Our latest project at work is React based. It's been so much fun to get our hands on a new UI framework.

We built out the initial proof of concept using React, React-Router and Refluxjs. Refluxjs was a great way to get the project started quickly. But we quickly started noticing some things that got us worried.

It seems like development on Refluxjs is stalled. Refluxjs lacks es6 support. It does not currently support universal apps. While it does have simplicity over other Flux implementations, these all come at a cost. By eliminating the global dispatcher you lose out on the ability to apply middleware. It promotes the use of this.state in components.

Redux on the other hand seems to have a huge community around it. It's development is very active. It has support for universal apps. It's creator Dan Abramov was recently hired by facebook.

Since we hope to have our current project around for a long time, we decided it would be best to migrate to Redux.

How it worked in Refluxjs

╔═════════╗       ╔════════╗       ╔═════════════════╗
║ Actions ║------>║ Stores ║------>║ View Components ║
╚═════════╝       ╚════════╝       ╚═════════════════╝
     ^                                      │
     └--------------------------------------┘

How it works in Redux

╔════════════════╗       ╔════════════╗       ╔════════════╗
║ Action Creator ║------>║ Dispatcher ║------>║   Reducer  ║
╚════════════════╝       ╚════════════╝       ╚════════════╝
         ^                                           |
         |                                           |
         |                                           v
╔═════════════════╗                              ╔════════╗ 
║ View Components ║ <--------------------------  ║ Store  ║
╚═════════════════╝                              ╚════════╝

Notes on the migration

• There is now just one store. It does seem like a good idea to be able to represent the state of your app in one object.

• There is only one reducer. You can however logically separate your code using combineReducers and creating a root reducer.

• Reflux maps properties from the stores as this.state. This was convenient, but React advises keeping your components stateless.

• If you are dealing with data from a server you are going to need some middleware. Right now we have been using redux-thunk to add data to the server before dispatching the events to update the state.