React Redux Example

All the modern best practices in one example.

View on Github

Created and maintained by @erikras.

This starter boilerplate app uses the following technologies:

Features demonstrated in this project

Multiple components subscribing to same redux store slice
The App.js that wraps all the pages contains an InfoBar component that fetches data from the server initially, but allows for the user to refresh the data from the client. About.js contains a MiniInfoBar that displays the same data.
Server-side data loading
The Widgets page demonstrates how to fetch data asynchronously from some source that is needed to complete the server-side rendering. Widgets.js'sasyncConnect() function is called before the widgets page is loaded, on either the server or the client, allowing all the widget data to be loaded and ready for the page to render.
Data loading errors
The Widgets page also demonstrates how to deal with data loading errors in Redux. The API endpoint that delivers the widget data intentionally fails 33% of the time to highlight this. The clientMiddleware sends an error action which the widgets reducer picks up and saves to the Redux state for presenting to the user.
Session based login
On the Login page you can submit a username which will be sent to the server and stored in the session. Subsequent refreshes will show that you are still logged in.
Redirect after state change
After you log in, you will be redirected to a Login Success page. This magic logic is performed in componentWillReceiveProps() in App.js, but it could be done in any component that listens to the appropriate store slice, via Redux's @connect, and pulls the router from the context.
Auth-required views
The aforementioned Login Success page is only visible to you if you are logged in. If you try to go there when you are not logged in, you will be forwarded back to this home page. This magic logic is performed by theonEnter hook within routes.js.
Forms
The Survey page uses the still-experimental redux-form to manage form state inside the Redux store. This includes immediate client-side validation.
WebSockets / socket.io
The Chat uses the socket.io technology for real-time communication between clients. You need to login first.

From the author

I cobbled this together from a wide variety of similar "starter" repositories. As I post this in June 2015, all of these libraries are right at the bleeding edge of web development. They may fall out of fashion as quickly as they have come into it, but I personally believe that this stack is the future of web development and will survive for several years. I'm building my new projects like this, and I recommend that you do, too.

Thanks for taking the time to check this out.

– Erik Rasmussen

This is an info bar no info!
Have questions? Ask for help on Github or in the #react-redux-universal Discord channel.