Use Redux in Rails

index.js

import { createStore, combineReducers } from 'redux'

import { reducer as education } from 'reducers/education'
import { reducer as skills } from 'reducers/skills'

const buildResumeBuilderStore = () => {
  return createStore(combineReducers({ education, skills })
}

document.addEventListener('DOMContentLoaded', () => {
  registerStoreComponent(ResumeBuilderContainer, 'resume-builder-container', buildResumeBuilderStore)
})

registerStoreComponent.js

import React from 'react'
import ReactDOM from 'react-dom'

import { Provider } from 'react-redux'

const getProps = (container) => {
  const propsString = container.getAttribute("data-react-props")
  const props = propsString ? JSON.parse(propsString) : null

  return props
}

export const registerStoreComponent = (Instance, containerName, getStore) => {
  const selector = `[data-react-container=${containerName}]`
  const container = document.querySelector(selector)

  if (container) {
    const props = getProps(container)

    const store = getStore()
    ReactDOM.render(
      <Provider store={ store }>
        <Instance { ...props } />
      </Provider>, container)
  }
}

resumeBuilderContainer.js

import React from 'react'
import { connect } from 'react-redux'

import ResumeBuilder from 'components/resumeBuilder'

const ResumeBuilderContainer = React.createClass({
  render () {
    return(
      <ResumeBuilder />
    )
  }
})

export default connect()(ResumeBuilderContainer)