React/Reduxのtips ref: https://qiita.com/hiroykam/items/03d6f0b75f55b677c464

actions.jsx

export const PREPARE1 = "PREPARE1"
export const PREPARE2 = "PREPARE2"
export const MESSAGE1 = "MESSAGE1"
export const MESSAGE2 = "MESSAGE2"

const preparemessages = (n) => {
  const state = (n == 1) ?  PREPARE1 : PREPARE2
  return {
    type: state
  }
}

const createMessages = (n, arr = []) => {
  let lst = arr || []
  let start = arr.length + 1
  for (let i = start; i < start + 20; i++) {
    lst.push(i)
  }
  const state = (n == 1) ?  MESSAGE1 : MESSAGE2
  return {
    type: state,
    msg: lst
  }
}

export const loadMore = (n) => {
  return (dispatch, getState) => {
    dispatch(preparemessages(n))
    let messages = (n == 1) ? getState().demo.messages1 : getState().demo.messages2
    setTimeout(() => {
      dispatch(createMessages(n, messages))
    }, 1000)
  }
}

app.jsx

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import reducer from './reducer.jsx'
import DemoContainer from './container.jsx'

const store = createStore(reducer, applyMiddleware(thunk))

render (
  <Provider store={ store }>
    <DemoContainer />
  </Provider>,
  document.querySelector('.react_scroll')
)

cable.js

(function() {
  this.App || (this.App = {});
  App.cable = ActionCable.createConsumer();
}).call(this);

container.jsx

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as actions from './actions.jsx'
import ReduxInfiniteScroll from 'redux-infinite-scroll'
import ReduxInfiniteScrollEx from './ReduxInfiniteScrollEx.jsx'

class DemoContainer extends Component {
  render() {
    const { demo, actions } = this.props

    const _renderMessages = (messages) => {
      return messages.map((msg) => {
        return(
          <div className="item" key={msg}>{msg}</div>
        )
      })
    }

    return (
      <div style={{ width: "300px", marginLeft: "200px" }} >
        <ReduxInfiniteScroll loadingMore={ demo.loadingMore1 } containerHeight="300px" loadMore={ () => actions.loadMore(1) } >
          { _renderMessages(demo.messages1) }
        </ReduxInfiniteScroll>
        <br />
        <ReduxInfiniteScrollEx loadingMore={ demo.loadingMore2 } containerHeight="300px" loadMore={ () => actions.loadMore(2) } >
          { _renderMessages(demo.messages2) }
        </ReduxInfiniteScrollEx>
      </div>
    )
  }
}

const mapState = (state) => ({
  demo: state.demo
})

const mapDispatch = (dispatch) => ({
  actions: bindActionCreators(actions, dispatch)
})

export default connect(mapState, mapDispatch)(DemoContainer)

defaultStyle.js

export default ({
  suggestions: {
    display: "inline-block",
    position: "unset",
    float: "left",
    overflow: "scroll",
    maxHeight: "300px",
    marginLeft: "50%",

    list: {
      display: "inline-block",
      position: "unset",
      float: "left",
      backgroundColor: 'white',
      fontSize: 10,
    },

    item: {
      position: "relative",
      '&focused': {
        backgroundColor: '#cee4e5',
      },
    },
  }
})

file0.txt

$ yarn add --dev babel-preset-stage-2

file1.txt

$ npm install --save-dev babel-preset-stage-2

file10.js

class TestContainer extends Component {
  componentDidMount() {
    const { actions } = this.props
    actions.testMethod()
  }

  render() {
    return (
      <div>test</div>
    )
  }
}

file10.txt

$ yarn add --dev redux-shortcuts

file11.js

import React from 'react'

export const comp = ({ json }) => {
  const mu = Object.keys(json).map((key) => {
    return (
      <div key={ key } >
       <img src={ json[key].icon } /><br />
      </div>
    )
  })
  return (
    <div>
      { mu }
    </div>
  )
}

file11.txt

$ npm install --save-dev redux-shortcuts

file12.js

import React from 'react'

export const comp = ({ json }) => {
  const mu = Object.keys(json).map((key) => {
    return (
      <div key={ key } >
       <img src={ json[key].icon } /><br />
      </div>
    )
  })
  return (
    <div>
      { mu }
    </div>
  )
}

file12.txt

$ yarn add --dev redux-shortcuts

file13.txt

$ npm install --save-dev redux-shortcuts

file14.js

import { bindShortcuts } from 'redux-shortcuts'
import { dispatchTest } from './actions'
import { reducer } from './reducer'

const store = createStore(reducer, applyMiddleware(thunk))

bindShortcuts(
  [['command+d', 'ctrl+d'], dispatchTest]
)(store.dispatch)

file14.txt

$ npm install --save-dev redux-shortcuts

file15.js

import { bindShortcuts } from 'redux-shortcuts'
import { dispatchTest } from './actions'
import { reducer } from './reducer'

const store = createStore(reducer, applyMiddleware(thunk))

bindShortcuts(
  [['command+d', 'ctrl+d'], dispatchTest]
)(store.dispatch)

file15.txt

$ yarn add --dev redux-devtools
$ yarn add --dev redux-devtools-log-monitor
$ yarn add --dev redux-devtools-dock-monitor

file16.txt

$ npm install --save-dev redux-devtools
$ npm install --save-dev redux-devtools-log-monitor
$ npm install --save-dev redux-devtools-dock-monitor

file17.txt

$ npm install --save-dev redux-devtools
$ npm install --save-dev redux-devtools-log-monitor
$ npm install --save-dev redux-devtools-dock-monitor

file18.txt

$ yarn init
$ yarn add --dev webpack
$ yarn add --dev react react-dom redux react-redux redux-thunk
$ yarn add --dev babel-loader babel-core babel-preset-es2015 babel-preset-react babel-preset-stage-2
$ yarn add --dev style-loader css-loader
$ yarn add --dev react-mentions

file19.txt

$ yarn init
$ yarn add --dev webpack
$ yarn add --dev react react-dom redux react-redux redux-thunk
$ yarn add --dev babel-loader babel-core babel-preset-es2015 babel-preset-react babel-preset-stage-2
$ yarn add --dev style-loader css-loader
$ yarn add --dev react-mentions

file20.txt

$ yarn init
$ yarn add --dev webpack
$ yarn add --dev react react-dom redux react-redux redux-thunk
$ yarn add --dev babel-loader babel-core babel-preset-es2015 babel-preset-react babel-preset-stage-2
$ yarn add --dev style-loader css-loader
$ yarn add --dev redux-infinite-scroll

file21.txt

$ yarn run prod

file22.txt

$ yarn init
$ yarn add --dev webpack
$ yarn add --dev react react-dom redux react-redux redux-thunk
$ yarn add --dev babel-loader babel-core babel-preset-es2015 babel-preset-react babel-preset-stage-2
$ yarn add --dev style-loader css-loader
$ yarn add --dev redux-infinite-scroll

file25.txt

$ yarn run prod

file26.txt

$ yarn init
$ yarn add --dev webpack
$ yarn add --dev react react-dom redux react-redux redux-thunk
$ yarn add --dev babel-loader babel-core babel-preset-es2015 babel-preset-react babel-preset-stage-2
$ yarn add --dev style-loader css-loader
$ yarn add --dev redux-infinite-scroll

file27.css

.redux-infinite-scroll {
    overflow: scroll;
}

file27.txt

$ yarn run prod

file28.txt

$ yarn init
$ yarn add --dev webpack
$ yarn add --dev react react-dom redux react-redux redux-thunk
$ yarn add --dev babel-loader babel-core babel-preset-es2015 babel-preset-react babel-preset-stage-2
$ yarn add --dev style-loader css-loader
$ yarn add --dev redux-infinite-scroll

file29.css

.redux-infinite-scroll {
    overflow: scroll;
}

file29.txt

$ yarn init
$ yarn add --dev webpack
$ yarn add --dev react react-dom redux react-redux redux-thunk
$ yarn add --dev babel-loader babel-core babel-preset-es2015 babel-preset-react babel-preset-stage-2
$ yarn add --dev style-loader css-loader
$ yarn add --dev redux-infinite-scroll

file3.html

return (<div className={ `uk-navbar-nav uk-hidden-small`} />)

file3.js

return (<div className={ `uk-navbar-nav uk-hidden-small`} />)

file30.css

.redux-infinite-scroll {
    overflow: scroll;
}

file31.txt

$ yarn run prod

file33.js

export const ChatChannel = App.cable.subscriptions.create({channel: "ChatChannel" },
  {
    connected: () => {
      console.log("connected")
    },
    disconnected: () => {
      console.log("disconnected")
    },
    received: (data) => {
      console.log("received",  data)
    },
    speak: () => {
      return (dispatch, getState) => {
        const msg = getState().demo.msg
        BrandChannel.perform('speak', { msg })
        console.log("speak")
      }
    }
  }
)

file36.txt

$ yarn run prod

file38.js

export const ChatChannel = App.cable.subscriptions.create({channel: "ChatChannel" },
  {
    connected: () => {
      console.log("connected")
    },
    disconnected: () => {
      console.log("disconnected")
    },
    received: (data) => {
      console.log("received",  data)
    },
    speak: () => {
      return (dispatch, getState) => {
        const msg = getState().demo.msg
        BrandChannel.perform('speak', { msg })
        console.log("speak")
      }
    }
  }
)

file38.txt

$ yarn run prod

file39.txt

$ yarn run prod

file4.html

return (<div style={{ textAlign: 'center', margin: '10px 0px' }} />)

file4.js

const navi = "uk-navbar-nav"
const opt = "uk-hidden-small"
return (<div className={ `${navi} ${opt}`} />)

file40.js

export const ChatChannel = App.cable.subscriptions.create({channel: "ChatChannel" },
  {
    connected: () => {
      console.log("connected")
    },
    disconnected: () => {
      console.log("disconnected")
    },
    received: (data) => {
      console.log("received",  data)
    },
    speak: () => {
      return (dispatch, getState) => {
        const msg = getState().demo.msg
        BrandChannel.perform('speak', { msg })
        console.log("speak")
      }
    }
  }
)

file41.js

export const ChatChannel = App.cable.subscriptions.create({channel: "ChatChannel" },
  {
    connected: () => {
      console.log("connected")
    },
    disconnected: () => {
      console.log("disconnected")
    },
    received: (data) => {
      console.log("received",  data)
    },
    speak: () => {
      return (dispatch, getState) => {
        const msg = getState().demo.msg
        BrandChannel.perform('speak', { msg })
        console.log("speak")
      }
    }
  }
)

file5.html

return (<div style={{ textAlign: 'center', margin: '10px 0px' }} />)

file5.js

const navi = "uk-navbar-nav"
const opt = "uk-hidden-small"
return (<div className={ `${navi} ${opt}`} />)

file6.html

return (<div style={{ textAlign: 'center', margin: '10px 0px' }} />)

file6.js

return (
  <div className="test">
    <div className="test-title">
      <i className="test-icon" />
    </div>
    {/*
    <div className="test-body">
      <p>test body</p>
    </div>
    */}
    <div className="test-comment">
      {// <p>test comment</p> 
      }
    </div>
  </div>

file7.js

return (
  <div className="test">
    <div className="test-title">
      <i className="test-icon" />
    </div>
    {/*
    <div className="test-body">
      <p>test body</p>
    </div>
    */}
    <div className="test-comment">
      {// <p>test comment</p> 
      }
    </div>
  </div>

file8.js

import { state } from 'state'

const test1 = () => {
  return {
    type: state.TEST1
  }
}

const test2 = () => {
  return {
    type: state.TEST2
  }
}

const dispatchTest = () => {
  return (dispatch, getState) => {
    if (getState().myState.type === state.TEST1) {
      dispatch(test2())
    } else {
      dispatch(test1())
    }
  }
}

file8.txt

$ yarn add --dev redux-shortcuts

file9.js

import { state } from 'state'
import { store } from 'store'

const dispatchTest = () => {
  if (store.getState().myState.type === state.TEST1) {
    return {
      type: state.TEST2
    }
  } else {
    return {
      type: state.TEST1
    }
  }
}

file9.txt

$ npm install --save-dev redux-shortcuts

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React infnite scroll test</title>
    <link rel="stylesheet" type="text/css" href="css/main.css" media="screen">
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css" media="screen">
  </head>
  <body>
    <div class="react_scroll"></div>
    <script type="text/javascript" src="js/app.bundle.js"></script>
  </body>
</html>

package.json

{
  "name": "infinite_scroll",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "css-loader": "^0.28.5",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2",
    "redux-infinite-scroll": "^1.0.9",
    "redux-thunk": "^2.2.0",
    "style-loader": "^0.18.2",
    "webpack": "^3.5.5"
  },
  "scripts": {
    "prod": "webpack -p",
    "dev": "webpack -d"
  }
}

reducer.jsx

import { combineReducers } from 'redux'
import * as actions from './actions.jsx'

export const initialAppState = {
  messages1: [],
  loadingMore1: false,
  messages2: [],
  loadingMore2: false
}

const demo = (state = initialAppState, action) => {
  if (action.type === actions.PREPARE1) {
    return {
      ...state,
      loadingMore1: true,
    }
  } else if (action.type === actions.MESSAGE1) {
    return {
      ...state,
      messages1: action.msg,
      loadingMore1: false
    }
  } else if (action.type === actions.PREPARE2) {
    return {
      ...state,
      loadingMore2: true,
    }
  } else if (action.type === actions.MESSAGE2) {
    return {
      ...state,
      messages2: action.msg,
      loadingMore2: false
    }
  } else {
    return state
  }
}

const reducer = combineReducers({
  demo
})

export default reducer

ReduxInfiniteScrollEx.jsx

import React, { Component } from 'react'
import ReactDOM from 'react-dom';
import ReduxInfiniteScroll from 'redux-infinite-scroll'

export default class ReduxInfiniteScrollEx extends ReduxInfiniteScroll {

  constructor(props) {
    super(props)
    this._pastLength = 0
  }

  componentDidUpdate () {
    const currentLength = this._scrollHeight()
    if (currentLength > this._pastLength) {
      ReactDOM.findDOMNode(this).scrollTop += (currentLength - this._pastLength)
    }
    if (currentLength !== this._pastLength) {
      this._pastLength = currentLength
    }

    this.attachScrollListener();
  }

  _scrollHeight() {
    return ReactDOM.findDOMNode(this).scrollHeight
  }

  _elScrollListener() {
    let el = ReactDOM.findDOMNode(this)

    if (this.props.horizontal) {
      let leftScrollPos = el.scrollLeft
      let totalContainerWidth = el.scrollWidth
      let containerFixedWidth = el.offsetWidth
      let rightScrollPos = leftScrollPos + containerFixedWidth

      return (totalContainerWidth - rightScrollPos)
    }

    return el.scrollTop
  }

  scrollListener() {
    if (this._totalItemsSize() <= 0) return

    let bottomPosition = this.props.elementIsScrollable ? this._elScrollListener() : this._windowScrollListener()

    if (bottomPosition === 0) {
      this.detachScrollListener()
      this.props.loadMore()
    }
  }

  render () {
    const Holder = this.props.holderType

    return (
      <Holder className={ this._assignHolderClass() } style={{height: this.props.containerHeight, overflow: 'scroll'}}>
        {this.renderLoader()}
        {this.props.animateItems ? this._renderWithTransitions() : this._renderOptions()}
      </Holder>
    )
  }
}

webpack.config.js

var webpack = require('webpack')

module.exports = {
  entry: {
    './js/app': './jsx/app.jsx'
  },
  output: {
    path: __dirname,
    filename: '[name].bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.css$/,
        loaders: ['style-loader', 'css-loader?modules'],
      },
      {
        test: /\.jsx$/,
        exclude: /(node_modules|.git)/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react', 'stage-2']
        }
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|.git)/,
        loader: "babel-loader",
        query:{
          presets: ['es2015']
        }
      }
    ]
  }
}