When using with Redux, does not passing childContext from Provider to child components

[ryanbahniuk]

Redux recommends that you wrap your Router with a Provider from react-redux which passes the store to all child components via React's context. Container components then find this store and pull state off of it. The router setup looks like this:

<Provider store={store}>
  <Router history={browserHistory}>
    <Route path='/' component={IndexContainer}>
  </Router>
</Provider>

However, react-engine builds a RouterContext based on the matched params from react-router. This does not pass any available context to the children component, making the recommended use case of Redux with React blow up.

[samsel]

@ryanbahniuk redux support isn't available yet. We are working on it.

[SOSANA]

@ryanbahniuk any work arounds you came up with?

@samsel any eta on this?

[ryanbahniuk]

@SOSANA I ended up not using Provider or connect from react-redux and instead hooking up the store manually and subscribing to its change events in my containers. It's not ideal, however, because I am duplicating some of the basic logic of connect without some of its more advanced performance based logic.

[SOSANA]

@ryanbahniuk thanks for sharing, gonna try and do the same till a fix is applied

[SOSANA]

@samsel has this issue been resolved? I have a project we are kicking off tomorrow and would like to react-engine with redux, browserHistory, and react-router.

any gotchas or things I should know to have a smooth implementation? @ryanbahniuk @taosbeta @samsel ? I noticed the docs haven't been updated in a while and just wanted to make sure I wire it up correctly. I will be implementing this with express.js

[7aos]

@SOSANA Hey, here is a simple sample: https://github.com/taosbeta/react-engine-starter.

Basically there are 2 places need to setup the redux env:

1. config for server side rendering: https://github.com/taosbeta/react-engine-starter/blob/master/config/config.json#L16
2. client side rendering bootstrap: https://github.com/taosbeta/react-engine-starter/blob/master/public/views/client.js

The idea behind is that now react-engine wraps the component to render (e.g react router) with Provider if these config/settings above are present.

[samsel]

@SOSANA any comments on the approach?

[samsel]

we can take this approach and merge to mainstream if you guys are ok

[SOSANA]

@samsel yes we are using the provider approach to this project, I have to double check the links you provide but could of sworn one of them was based off kraken

here's an example on client side

ReactDOM.render(
  <Provider store={store}>
    <Router history={browserHistory} routes={getRoutes} />
  </Provider>
  , document.querySelector('.container'));

@samsel thanks so much for your quick response! Also if all goes well could add updated boilerplate for your project or another example with express.js implementation

[SOSANA]

@taosbeta can I still wire this up like you did using express.js? if not suggestions? Thanks bro for replying back so soon!

[7aos]

@SOSANA yah, we can wire using express.js: by providing the routes config in the create arguments.

https://github.com/paypal/react-engine/blob/master/README.md Usage On Server Side -Setup in an Express app section.

[SOSANA]

@taosbeta @samsel @ryanbahniuk For this client project doing micro-services architecture so haven't implement FE yet, just wrapping up the server api as we speak.

One thing I noticed and maybe you guys could chime in but with other server-side mounted on inital render you will notice a delay in css or a flicker, basically serves the inital load from the server before the css loads on client by a few seconds, have you guys experienced this at all? and if so any hacks to avoid this issue? haven't implemented this for the FE app yet but will be soon and just want to avoid this, hoping no issues with this :) I have experienced this with other serverside mounting before, The general response is in dev mode when using HMR with webpack, but never actually pushed to production so wasn't sure it still occurs, but based of other repos its still an issue as they have open issues complaining about it.

[ryanbahniuk]

Using React on the server-side should limit any kind of flash from JS hookup because it will diff on the client-side and not re-render. I've never noticed any real CSS flicker with server side rendering.