Revise "Hello World" Redux example

Author: nostophilia

lib/generators/react_on_rails/react_with_redux_generator.rb

@@ -17,7 +17,6 @@ def copy_base_redux_files
            client/app/bundles/HelloWorld/containers/HelloWorld.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/HelloWorldWidget.jsx.tt

@@ -4,39 +4,33 @@
 import React, { PropTypes } from 'react';
 
 // Simple example of a React "dumb" component
-export default class HelloWorldWidget extends React.Component {
-  static 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,
-  };
+const HelloWorldWidget = (props) => {
+  const { name, updateName } = props;
 
-  // React will automatically provide us with the event `e`
-  handleChange(e) {
-    const name = e.target.value;
-    this.props.updateName(name);
-  }
+  return (
+    <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>
+  );
+};
 
-  render() {
-    const { name } = this.props;
-    return (
-      <div className="container">
-        <h3>
-          Hello, {name}!
-        </h3>
-        <hr />
-        <form className="form-horizontal">
-          <label>
-            Say hello to:
-          </label>
-          <input
-            type="text"
-            value={name}
-            onChange={e => this.handleChange(e)}
-          />
-        </form>
-      </div>
-    );
-  }
-}
+HelloWorldWidget.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 HelloWorldWidget;

lib/generators/react_on_rails/templates/base/base/client/package.json.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/redux/base/client/app/bundles/HelloWorld/actions/helloWorldActionCreators.jsx

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

lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/constants/helloWorldConstants.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';
-
-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 default {
+  HELLO_WORLD_NAME_UPDATE: 'HELLO_WORLD_NAME_UPDATE',
+};

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

@@ -1,42 +1,27 @@
 import React, { PropTypes } from 'react';
-import HelloWorldWidget from '../components/HelloWorldWidget';
 import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
-import Immutable from 'immutable';
-import * as helloWorldActionCreators from '../actions/helloWorldActionCreators';
+import HelloWorldWidget from '../components/HelloWorldWidget';
+import * as actions from '../actions/helloWorldActionCreators';
 
-function select(state) {
-  // Which part of the Redux global state does our component want to receive as props?
-  // Note the use of `$$` to prefix the property name because the value is of type Immutable.js
-  return { $$helloWorldStore: state.$$helloWorldStore };
-}
+// Which part of the Redux global state does our component want to receive as props?
+const mapStateToProps = (state) => ({ name: state.name });
 
 // Simple example of a React "smart" component
 const HelloWorld = (props) => {
-  const { dispatch, $$helloWorldStore } = props;
-  const actions = bindActionCreators(helloWorldActionCreators, dispatch);
-  const { updateName } = actions;
-  const name = $$helloWorldStore.get('name');
+  const { name, updateName } = props;
 
   // This uses the ES2015 spread operator to pass properties as it is more DRY
   // This is equivalent to:
-  // <HelloWorldWidget $$helloWorldStore={$$helloWorldStore} actions={actions} />
-  return (
-    <HelloWorldWidget {...{ updateName, name }} />
-  );
+  // <HelloWorldWidget name={name} updateName={updateName} />
+  return <HelloWorldWidget {...{ name, updateName }} />;
 };
 
 HelloWorld.propTypes = {
-  dispatch: PropTypes.func.isRequired,
-
-  // This corresponds to the value used in function select above.
-  // We prefix all property and variable names pointing to Immutable.js objects with '$$'.
-  // This allows us to immediately know we don't call $$helloWorldStore['someProperty'], but
-  // instead use the Immutable.js `get` API for Immutable.Map
-  $$helloWorldStore: PropTypes.instanceOf(Immutable.Map).isRequired,
+  name: PropTypes.string.isRequired,
+  updateName: PropTypes.func.isRequired,
 };
 
 // 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(select)(HelloWorld);
+export default connect(mapStateToProps, actions)(HelloWorld);

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

@@ -1,19 +1,16 @@
-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;
+const helloWorldReducer = (state = { name: '' }, action) => {
+  const { type, text } = action;
 
   switch (type) {
     case actionTypes.HELLO_WORLD_NAME_UPDATE:
-      return $$state.set('name', name);
 
+      // use spread operator to avoid mutating this state
+      return { ...state, name: text };
     default:
-      return $$state;
+      return state;
   }
-}
+};
+
+export default helloWorldReducer;

lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/reducers/index.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 configureStore from '../store/helloWorldStore';
 import HelloWorld from '../containers/HelloWorld';
 
 // 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)}>
+    <HelloWorld />
+  </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/startup/HelloWorldApp.jsx.tt

@@ -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/store/helloWorldStore.jsx

@@ -8,7 +8,6 @@
        client/app/bundles/HelloWorld/containers/HelloWorld.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