Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Using Redux Provider: id mismatch?

See original GitHub issue

Steps to reproduce

Render any react component with a Provider on the server (set prerender as true)

Expected behavior

The component should be generated from the server, then UJS should mount the client version

Actual behavior

screen shot 2018-02-23 at 2 14 48 pm

System configuration

Sprockets or Webpacker version: No version (Latest) React-Rails version: No Version (Latest) Rect_UJS version: React-Rails specified. Rails version: 5.1.4 Ruby version:2.5.0

I’m attempting to pre-render a component with a Provider, but it has issues when UJS tries to automatically mount the client version on top of it.

My setup absolutely works outside of redux. Rendering any normal component works.
react-on-rails is not only too far of a departure, but it’s too battery included, no migration instructions, and I’d like to depend on this more official release.

Issue Analytics

State:
Created 6 years ago
Reactions:2
Comments:14 (8 by maintainers)

Top GitHub Comments

4reactions

ttanimichicommented, Feb 26, 2018

add a redux example

+1. Although Redux has nothing to do with this gem, many users of this gem seems to be struggling to use Redux with this gem.

FYI. My usage example of Redux with this gem is below:

# app/controllers/posts_controller.rb

class PostsController < ApplicationController
  def show
    render component: 'Post', props: { post: { id: params[:id], body: 'foo bar' } }, prerender: true
  end
end

// app/javascript/components/Post.js

import React from "react"
import { Provider, connect } from 'react-redux';
import { createStore, combineReducers } from 'redux';

function post(state = null, action) {
  return state;
}

const reducer = combineReducers({ post });

function PostComponent({ id, body }) {
  return (
    <div>
      <h1>Post</h1>
      <div>{id}</div>
      <div>{body}</div>
    </div>
  );
}

function mapStateToProps(state) {
  return state.post;
}

const PostContainer = connect(mapStateToProps)(PostComponent);

export default function Post(props) {
  const store = createStore(reducer, props);

  return (
    <Provider store={store}>
      <PostContainer />
    </Provider>
  );
}

$ curl localhost:3000/posts/42
<!DOCTYPE html>
<html>
  <head>
    <title>ReactRailsWithReduxExample</title>
    <meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="rdTZeqYi1qXrPofTTl/7yEGe9SnRe2zInWSPbuk2nrU/WmcKLaMZmRImvMfw3L2+lSpWwI8fEWzy2PvuShcAEA==" />
    <script src="/packs/application-ad21c81663060032e2ac.js"></script>
  </head>

  <body>
    <div data-react-class="Post" data-react-props="{&quot;post&quot;:{&quot;id&quot;:&quot;42&quot;,&quot;body&quot;:&quot;foo bar&quot;}}" data-hydrate="t"><div data-reactroot=""><h1>Post</h1><div>42</div><div>foo bar</div></div></div>
  </body>
</html>

repo: https://github.com/ttanimichi/react_rails_with_redux_example

1reaction

BookOfGregcommented, Feb 26, 2018

❤️ @ttanimichi thank you for that example! Yes I’ve noticed there are a fair few people who use react-rails as the entry point for transitioning from rails to react, so there are a lot of cases where it’s absolutely nothing to do with react-rails and everything to do with Webpack or React themselves but I do still try to help when and where they can.

There is probably a real issue where react-rails doesn’t define exactly how little it does for people so it’s not possible for them to tell when it’s an issue using the gem or an issue using something deeper. I’ve added examples and Wiki pages where possible to help out for those that do read them, not sure how much further to go as beyond a certain point they’re better reading the source materials for tools mentioned.