Using redux with react-rails and server rendering?

[justin808]

Has anybody gotten the redux library to work with server rendering?

• http://rackt.github.io/redux/index.html
• https://github.com/rackt/redux

I want to see how it compares to what I've got at https://github.com/shakacode/react_on_rails/

It seems that server rendering really should take a function that takes props rather than a component.

This is what we've got (CC: @alexfedoseev)

https://github.com/shakacode/react_on_rails/blob/master/spec/dummy/client/app/startup/ServerApp.jsx

// This is loaded by execJs and Rails to generate the HTML used for server rendering.
// Compare this file to ./ClientApp.jsx
// This module should export one default method that take props and returns the react component to
// render.
import React                from 'react';
import { combineReducers }  from 'redux';
import { applyMiddleware }  from 'redux';
import { createStore }      from 'redux';
import { Provider }         from 'react-redux';
import middleware           from 'redux-thunk';

// Uses the index
import reducers        from '../reducers/reducersIndex';
import HelloWorldContainer  from '../components/HelloWorldContainer';

export default (props) => {
  const combinedReducer = combineReducers(reducers);

  // This is where we'll put in the middleware for the async function. Placeholder.
  // store will have helloWorldData as a top level property
  const store = applyMiddleware()(createStore)(combinedReducer, props);

  // Provider uses the this.props.children, so we're not typical React syntax.
  // This allows redux to add additional props to the HelloWorldContainer.
  return (
    <Provider store={store}>
      {() => <HelloWorldContainer />}
    </Provider>
  );
}

[ynonp]

react-rails and Redux

The main issue I found when integrating react-rails and flux/redux is managing application state. In redux I'd like to have a single application state serialized from the server and parsed in the client, and to use that state to initialize the main store. Something like:

initialState = JSON.parse(window.__APPSTATE__);

But that won't work since react-rails splits its work to 2 phases: it first reads all .js files in the renderer initialize phase and every call to the view helper only calls render.

Solution is described below by using a new renderer that:

1. takes an @appstate attribute in its prerender options
2. uses the before_render hook to inject JS code before calling render. That code dispatches a new action setting the application state.
3. only then it calls the component's render function

I'm not sure it's the best solution or how to generalize it, so any feedback is welcomed.
Code gist:
https://gist.github.com/ynonp/0c266d4c7b77ed9da0d3/

[justin808]

@ynonp the gist link only works for you

[ynonp]

sorry, fixed

[tarun1089]

Were you able to successfully use redux with react-rails? We are also facing similar issues.

[justin808]

All, we've got this working using https://github.com/shakacode/react_on_rails/. We're about to put in the example of https://github.com/shakacode/react-webpack-rails-tutorial/ using the gem. We're using this in 3 commercial projects. We're about to have this working with react + redux + react-router + server rendering plus rails in the tutorial. It's not so much of a tutorial but a sample. Please feel free to reach me directly if you need more info. PR's on the shakacode projects are desirable!

[ynonp]

justin808 your live demo at http://www.reactrails.com/ does most of the rendering client-side (using view source I can't see the comments). Is this the project you refer to ? Is there another link?

[justin808]

@ynonp We just haven't put that in yet...If you want to make that pull request, I can help you. No reason it shouldn't work. We're planning on it. This is an example: https://github.com/shakacode/react_on_rails/tree/master/spec/dummy

[justin808]

https://github.com/shakacode/react_on_rails is READY with Redux + Server Rendering + Webpack.

[NullVoxPopuli]

@justin808 for just starting out with this, I feel react_on_rails + tutorial is too 'everything all at once'.
.. sort of. The Readme is basic enough to get just react working, but to also get react-router-redux working seems tricky. the sample app has a lot of things in it shown all at once, so it's hard to tell what is the minimum required -- also showing that there is a tight dependency on the react-on-rails package, which I'd prefer not to have.

[justin808]

@NullVoxPopuli You're either going to use react-rails or react_on_rails, or you can just do I used to with some build scripts that put the JS file in the Rails, as I used to do.

http://www.railsonmaui.com/blog/2014/10/03/integrating-webpack-and-the-es6-transpiler-into-an-existing-rails-project/

[programrails]

react-rails (2.4.7)
I completely does not understand how to make it work. Did anybody really succeed? I made a custom AppstateRenderer renderer - but I don't understand - how do I access my store inside its before_render hook? What exactly should I include into server_rendering.js?

I need to somehow dispatch my store server-side - and I can't do it.

[ttanimichi]

Can you take a look at this comment?
#878 (comment)