Revise "Hello World" Redux example

Author: nostophilia

lib/generators/react_on_rails/base_generator.rb

@@ -77,7 +77,7 @@ def template_base_files
            Procfile.dev
            app/views/hello_world/index.html.erb
            package.json
-           client/app/bundles/HelloWorld/components/HelloWorldWidget.jsx
+           client/app/bundles/HelloWorld/components/HelloWorld.jsx
            client/package.json).each { |file| template(base_path + file + ".tt", file) }
       end
 

lib/generators/react_on_rails/react_no_redux_generator.rb

@@ -10,7 +10,7 @@ class ReactNoReduxGenerator < Rails::Generators::Base
 
       def copy_base_files
         base_path = "no_redux/base/"
-        file = "client/app/bundles/HelloWorld/containers/HelloWorld.jsx"
+        file = "client/app/bundles/HelloWorld/containers/HelloWorldContainer.jsx"
         copy_file(base_path + file, file)
       end
 

lib/generators/react_on_rails/react_with_redux_generator.rb

@@ -14,10 +14,9 @@ def create_redux_directories
       def copy_base_redux_files
         base_path = "redux/base/"
         %w(client/app/bundles/HelloWorld/actions/helloWorldActionCreators.jsx
-           client/app/bundles/HelloWorld/containers/HelloWorld.jsx
+           client/app/bundles/HelloWorld/containers/HelloWorldContainer.jsx
            client/app/bundles/HelloWorld/constants/helloWorldConstants.jsx
            client/app/bundles/HelloWorld/reducers/helloWorldReducer.jsx
-           client/app/bundles/HelloWorld/reducers/index.jsx
            client/app/bundles/HelloWorld/store/helloWorldStore.jsx).each do |file|
              copy_file(base_path + file, file)
            end

lib/generators/react_on_rails/templates/base/base/client/app/bundles/HelloWorld/components/HelloWorld.jsx.tt

@@ -0,0 +1,29 @@
+import React, { PropTypes } from 'react';
+
+// Simple example of a React "dumb" component
+const HelloWorld = ({ name, updateName }) => (
+  <div className="container">
+    <h3>
+      Hello, {name}!
+    </h3>
+    <hr />
+    <form className="form-horizontal">
+      <label htmlFor="name">
+        Say hello to:
+      </label>
+      <input
+        type="text" value={name} id="name"
+        onChange={(e) => updateName(e.target.value)}
+      />
+    </form>
+  </div>
+);
+
+HelloWorld.propTypes = {
+  // If you have lots of data or action properties, you should consider grouping them by
+  // passing two properties: "data" and "actions".
+  updateName: PropTypes.func.isRequired,
+  name: PropTypes.string.isRequired,
+};
+
+export default HelloWorld;

lib/generators/react_on_rails/templates/base/base/client/app/bundles/HelloWorld/components/HelloWorldWidget.jsx.tt

@@ -24,21 +24,13 @@
     "babel-preset-stage-0": "^6.5.0",
     "es5-shim": "^4.5.7",
     "expose-loader": "^0.7.1",
-    <%- if options.redux? -%>
-    "immutable": "^3.7.6",
-    <%- end -%>
     "imports-loader": "^0.6.5",
-    <%- if options.redux? -%>
-    "mirror-creator": "1.1.0",
-    <%- end -%>
     "react": "^0.14.8 || ^15.0.0",
     "react-dom": "^0.14.8 || ^15.0.0",
     "react-on-rails": "<%= VersionSyntaxConverter.new.rubygem_to_npm %>",
     <%- if options.redux? -%>
     "react-redux": "^4.4.1",
     "redux": "^3.3.1",
-    "redux-promise": "^0.5.3",
-    "redux-thunk": "^2.0.1",
     <%- end -%>
     "webpack": "^1.12.14"
   },

lib/generators/react_on_rails/templates/base/base/client/package.json.tt

@@ -1,8 +1,8 @@
 import React, { PropTypes } from 'react';
-import HelloWorldWidget from '../components/HelloWorldWidget';
+import HelloWorld from '../components/HelloWorld';
 
 // Simple example of a React "smart" component
-export default class HelloWorld extends React.Component {
+export default class HelloWorldContainer extends React.Component {
   static propTypes = {
     name: PropTypes.string.isRequired, // this is passed from the Rails view
   };
@@ -15,14 +15,12 @@ export default class HelloWorld extends React.Component {
     this.state = { name: this.props.name };
   }
 
-  updateName(name) {
-    this.setState({ name });
-  }
+  updateName = (name) => { this.setState({ name }); };
 
   render() {
     return (
       <div>
-        <HelloWorldWidget name={this.state.name} updateName={e => this.updateName(e)} />
+        <HelloWorld name={this.state.name} updateName={this.updateName} />
       </div>
     );
   }

lib/generators/react_on_rails/templates/no_redux/base/client/app/bundles/HelloWorld/containers/HelloWorld.jsx renamed to lib/generators/react_on_rails/templates/no_redux/base/client/app/bundles/HelloWorld/containers/HelloWorldContainer.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import ReactOnRails from 'react-on-rails';
 
-import HelloWorld from '../containers/HelloWorld';
+import HelloWorldContainer from '../containers/HelloWorldContainer';
 
 const HelloWorldApp = (props) => (
-  <HelloWorld {...props} />
+  <HelloWorldContainer {...props} />
 );
 
 // This is how react_on_rails can see the HelloWorldApp in the browser.

lib/generators/react_on_rails/templates/no_redux/base/client/app/bundles/HelloWorld/startup/HelloWorldApp.jsx.tt

@@ -1,8 +1,8 @@
-import actionTypes from '../constants/helloWorldConstants';
+/* eslint-disable import/prefer-default-export */
 
-export function updateName(name) {
-  return {
-    type: actionTypes.HELLO_WORLD_NAME_UPDATE,
-    name,
-  };
-}
+import { HELLO_WORLD_NAME_UPDATE } from '../constants/helloWorldConstants';
+
+export const updateName = (text) => ({
+  type: HELLO_WORLD_NAME_UPDATE,
+  text,
+});

lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/actions/helloWorldActionCreators.jsx

@@ -1,13 +1,3 @@
-// See https://www.npmjs.com/package/mirror-creator
-// Allows us to set up constants in a slightly more concise syntax. See:
-// client/app/bundles/HelloWorld/actions/helloWorldActionCreators.jsx
-import mirrorCreator from 'mirror-creator';
+/* eslint-disable import/prefer-default-export */
 
-const actionTypes = mirrorCreator([
-  'HELLO_WORLD_NAME_UPDATE',
-]);
-
-// actionTypes = {HELLO_WORLD_NAME_UPDATE: "HELLO_WORLD_NAME_UPDATE"}
-// Notice how we don't have to duplicate HELLO_WORLD_NAME_UPDATE twice
-// thanks to mirror-creator.
-export default actionTypes;
+export const HELLO_WORLD_NAME_UPDATE = 'HELLO_WORLD_NAME_UPDATE';

lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/constants/helloWorldConstants.jsx

@@ -0,0 +1,13 @@
+// Simple example of a React "smart" component
+
+import { connect } from 'react-redux';
+import HelloWorld from '../components/HelloWorld';
+import * as actions from '../actions/helloWorldActionCreators';
+
+// Which part of the Redux global state does our component want to receive as props?
+const mapStateToProps = (state) => ({ name: state.name });
+
+// Don't forget to actually use connect!
+// Note that we don't export HelloWorld, but the redux "connected" version of it.
+// See https://github.com/reactjs/react-redux/blob/master/docs/api.md#examples
+export default connect(mapStateToProps, actions)(HelloWorld);

lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/containers/HelloWorld.jsx

@@ -1,19 +1,15 @@
-import Immutable from 'immutable';
-
-import actionTypes from '../constants/helloWorldConstants';
-
-export const $$initialState = Immutable.fromJS({
-  name: '', // this is the default state that would be used if one were not passed into the store
-});
-
-export default function helloWorldReducer($$state = $$initialState, action) {
-  const { type, name } = action;
-
-  switch (type) {
-    case actionTypes.HELLO_WORLD_NAME_UPDATE:
-      return $$state.set('name', name);
+import { combineReducers } from 'redux';
+import { HELLO_WORLD_NAME_UPDATE } from '../constants/helloWorldConstants';
 
+const name = (state = '', action) => {
+  switch (action.type) {
+    case HELLO_WORLD_NAME_UPDATE:
+      return action.text;
     default:
-      return $$state;
+      return state;
   }
-}
+};
+
+const helloWorldReducer = combineReducers({ name });
+
+export default helloWorldReducer;

lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/containers/HelloWorldContainer.jsx

@@ -2,23 +2,19 @@ import React from 'react';
 import ReactOnRails from 'react-on-rails';
 import { Provider } from 'react-redux';
 
-import createStore from '../store/helloWorldStore';
-import HelloWorld from '../containers/HelloWorld';
+import configureStore from '../store/helloWorldStore';
+import HelloWorldContainer from '../containers/HelloWorldContainer';
 
 // See documentation for https://github.com/reactjs/react-redux.
 // This is how you get props from the Rails view into the redux store.
 // This code here binds your smart component to the redux store.
 // railsContext provides contextual information especially useful for server rendering, such as
 // knowing the locale. See the React on Rails documentation for more info on the railsContext
-const HelloWorldApp = (props, _railsContext) => {
-  const store = createStore(props);
-  const reactComponent = (
-    <Provider store={store}>
-      <HelloWorld />
-    </Provider>
-  );
-  return reactComponent;
-};
+const HelloWorldApp = (props, _railsContext) => (
+  <Provider store={configureStore(props)}>
+    <HelloWorldContainer />
+  </Provider>
+);
 
 // This is how react_on_rails can see the HelloWorldApp in the browser.
 ReactOnRails.register({ HelloWorldApp });

lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/reducers/helloWorldReducer.jsx

@@ -1,32 +1,8 @@
-import { compose, createStore, applyMiddleware, combineReducers } from 'redux';
+import { createStore } from 'redux';
+import helloWorldReducer from '../reducers/helloWorldReducer';
 
-// See
-// https://github.com/gaearon/redux-thunk and http://redux.js.org/docs/advanced/AsyncActions.html
-// This is not actually used for this simple example, but you'd probably want to use this
-// once your app has asynchronous actions.
-import thunkMiddleware from 'redux-thunk';
+const configureStore = (railsProps) => (
+  createStore(helloWorldReducer, railsProps)
+);
 
-import reducers from '../reducers';
-import { initialStates } from '../reducers';
-
-export default props => {
-  // This is how we get initial props Rails into redux.
-  const { name } = props;
-  const { $$helloWorldState } = initialStates;
-
-  // Redux expects to initialize the store using an Object, not an Immutable.Map
-  const initialState = {
-    $$helloWorldStore: $$helloWorldState.merge({
-      name,
-    }),
-  };
-
-  const reducer = combineReducers(reducers);
-  const composedStore = compose(
-    applyMiddleware(thunkMiddleware)
-  );
-  const storeCreator = composedStore(createStore);
-  const store = storeCreator(reducer, initialState);
-
-  return store;
-};
+export default configureStore;

lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/reducers/index.jsx

@@ -1,6 +1,6 @@
 shared_examples "no_redux_generator" do
   it "copies non-redux base files" do
-    assert_file("client/app/bundles/HelloWorld/containers/HelloWorld.jsx")
+    assert_file("client/app/bundles/HelloWorld/containers/HelloWorldContainer.jsx")
     assert_file("client/app/bundles/HelloWorld/startup/HelloWorldApp.jsx") do |contents|
       assert_match("HelloWorld", contents)
     end

lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/startup/HelloWorldApp.jsx.tt

@@ -5,10 +5,9 @@
 
   it "copies base redux files" do
     %w(client/app/bundles/HelloWorld/actions/helloWorldActionCreators.jsx
-       client/app/bundles/HelloWorld/containers/HelloWorld.jsx
+       client/app/bundles/HelloWorld/containers/HelloWorldContainer.jsx
        client/app/bundles/HelloWorld/constants/helloWorldConstants.jsx
        client/app/bundles/HelloWorld/reducers/helloWorldReducer.jsx
-       client/app/bundles/HelloWorld/reducers/index.jsx
        client/app/bundles/HelloWorld/store/helloWorldStore.jsx
        client/app/bundles/HelloWorld/startup/HelloWorldApp.jsx).each { |file| assert_file(file) }
   end