(WIP) Give a good start to moving strange-middle-end to strangeluv

package.json

@@ -99,25 +99,29 @@
     "hapi": "^17.0.0",
     "history": "^4.7.2",
     "html-webpack-plugin": "^3.2.0",
+    "immer": "^4.0.0",
     "imports-loader": "^0.8.0",
     "inert": "^5.1.0",
     "keymirror": "^0.1.1",
     "node-sass": "^4.8.3",
     "normalize.css": "^8.0.0",
+    "normalizr": "^3.4.1",
     "postcss-loader": "^2.1.3",
     "react": "^16.3.1",
     "react-dom": "^16.3.1",
     "react-redux": "^5.0.7",
     "react-router-dom": "^4.2.2",
     "react-router-redux": "5.0.0-alpha.9",
     "redbox-react": "^1.2.2",
-    "redux": "^3.0.0",
-    "redux-thunk": "^2.0.0",
+    "redux": "^3.7.2",
+    "redux-thunk": "^2.3.0",
     "rimraf": "^2.5.1",
     "sass-loader": "^6.0.3",
+    "strange-middle-end": "^0.1.0",
     "strange-router": "^0.1.2",
     "strangeluv-core": "^2.0.0",
     "style-loader": "^0.20.3",
+    "styled-components": "^4.3.2",
     "url-loader": "^1.0.1",
     "webpack": "^3.0.0",
     "webpack-hot-middleware": "^2.11.0",

src/actions/counter.js

@@ -1,9 +1,10 @@
-const CounterTypes = require('action-types/counter');
+const { COUNTER_INCREMENT } = require('action-types/counter');
+
 
 exports.increment = (amount = 1) => {
 
     return {
-        type: CounterTypes.COUNTER_INCREMENT,
+        type: COUNTER_INCREMENT,
         payload: amount
     };
 };

src/main.js

@@ -1,16 +1,10 @@
 const React = require('react');
 const ReactDOM = require('react-dom');
-const CreateStore = require('./wiring/create-store');
-const History = require('./wiring/history');
-const AppContainer = require('./containers/App');
-const Initializers = require('./initializers');
+const AppContainer = require('containers/App');
+const M = require('middle-end');
 
-// Create redux store and sync history with react-router-redux
-
-const initialState = window.__INITIAL_STATE__;
-const store = CreateStore(initialState);
-
-Initializers.run(store);
+// Initialize strange-middle-end
+M.initialize();
 
 // Developer Tools Setup
 
@@ -26,14 +20,14 @@ const MOUNT_NODE = document.getElementById('root');
 
 let render = () => {
 
-    const routes = require('./routes')(store);
+    const routes = require('./routes')(M.store);
 
     ReactDOM.render(
 
         <AppContainer
-            history={History}
+            store={M.store}
+            history={M.mods.router.history}
             routes={routes}
-            store={store}
         />,
         MOUNT_NODE
     );

src/middle-end/history.js

@@ -0,0 +1,5 @@
+const { createBrowserHistory: createHistory } = require('history');
+
+const History = createHistory();
+
+module.exports = History;

src/middle-end/index.js

@@ -0,0 +1,33 @@
+const Redux = require('redux');
+const { routerMiddleware: RouterMiddleware } = require('react-router-redux');
+const { middleware: { thunk, errorLogger }, ...M } = require('strange-middle-end');
+
+const Enhancers = require('./enhancers');
+const History = require('./history');
+
+// After the middle-end has been initialized, 'M.create' will return the
+// initialized middle-end where initializers have been called
+// and middleware, mods have been registered.
+module.exports = M.create({
+    // In many applications, files in './mods' require this middle-end,
+    // which creates a circular dependency since mods are needed here in 'M.create'.
+    // Specifying 'mods' here as a function allows our mods to require this middle-end
+    // lazily and in a controlled way, which is at some point after 'M.initialize()' is called.
+    // In this app, 'M.initialize()' is called in /src/main.js.
+    mods: () => require('./mods'),
+    createStore: (reducer) => {
+
+        return Redux.createStore(
+            reducer,
+            {},
+            Redux.compose(
+                Redux.applyMiddleware(
+                    thunk,
+                    errorLogger,
+                    RouterMiddleware(History)
+                ),
+                ...Enhancers
+            )
+        );
+    }
+});

src/middle-end/mods/counter/action-types.js

@@ -0,0 +1,6 @@
+
+const M = require('middle-end');
+
+module.exports = M.createTypes({
+    INCREMENT: M.type.simple
+});

src/middle-end/mods/counter/actions.js

@@ -0,0 +1,8 @@
+
+const M = require('middle-end');
+
+const { INCREMENT } = require('./action-types');
+
+module.exports = {
+    increment: M.createAction(INCREMENT)
+};

src/middle-end/mods/counter/index.js

@@ -0,0 +1,6 @@
+
+module.exports = {
+    actions: require('./actions'),
+    reducer: require('./reducer'),
+    selectors: require('./selectors')
+};

src/middle-end/mods/counter/reducer.js

@@ -0,0 +1,12 @@
+
+const M = require('middle-end');
+const { INCREMENT } = require('./action-types');
+
+const initialState = {};
+
+module.exports = M.createReducer({ mutable: true }, initialState, {
+    [INCREMENT]: (draft) => {
+
+        draft.count++;
+    }
+});

src/middle-end/mods/counter/selectors.js

@@ -0,0 +1,4 @@
+
+module.exports = {
+    get: ({ counter }) => counter
+};

src/middle-end/mods/index.js

@@ -0,0 +1,4 @@
+
+module.exports = {
+    counter: require('./counter')
+};

src/routes/counter/components/Counter.js

@@ -1,33 +1,43 @@
 const React = require('react');
 const T = require('prop-types');
+const { default: Styled } = require('styled-components');
 
-const Classes = require('./styles.scss');
-
-const Counter = (props) => (
-
-    <div>
-        <h2 className={Classes.counterContainer}>
-            Counter:
-            {' '}
-            <span className={Classes['counter--green']}>
-                {props.counter}
-            </span>
-        </h2>
-        <button onClick={props.increment}>
-            Increment
-        </button>
-        {' '}
-        <button onClick={props.doubleAsync}>
-            Double (Async)
-        </button>
-    </div>
-
-);
-
-Counter.propTypes = {
+const internals = {};
+
+module.exports = (props) => {
+
+    const {
+        CounterContainer,
+        CounterNumber
+    } = internals;
+
+    return (
+
+        <div>
+            <CounterContainer>
+                {'Counter: '}
+                <CounterNumber>
+                    {props.counter}
+                </CounterNumber>
+            </CounterContainer>
+            <button onClick={props.increment}>
+                Increment
+            </button>
+        </div>
+
+    );
+};
+
+module.exports.propTypes = {
     counter: T.number.isRequired,
-    doubleAsync: T.func.isRequired,
     increment: T.func.isRequired
 };
 
-module.exports = Counter;
+internals.CounterContainer = Styled.h2`
+    margin: 1em auto;
+`;
+
+internals.CounterNumber = Styled.span`
+    font-weight: bold;
+    color: rgb(25, 200, 25);
+`;

src/routes/counter/containers/Counter.js

@@ -1,18 +1,17 @@
 const Connect = require('react-redux').connect;
-const CounterAct = require('actions/counter');
 const Counter = require('../components/Counter');
+const M = require('middle-end');
 
 const internals = {};
 
 // What state and actions do we want to hook-up?
 internals.connect = Connect(
     (state) => ({
-        counter: state.counter
+        counter: M.selectors.counter.get(state)
     }),
-    {
-        increment: () => CounterAct.increment(1),
-        doubleAsync: CounterAct.doubleAsync
-    }
+    () => ({
+        increment: () => M.dispatch.counter.increment(1)
+    })
 );
 
 // Hook them up to the counter

src/routes/home/components/HomeView.js

@@ -1,16 +1,24 @@
 const React = require('react');
 const DuckImage = require('../assets/duck.jpg');
-const Classes = require('./HomeView.scss');
+const { default: Styled } = require('styled-components');
 
-module.exports = () => (
+const internals = {};
 
-    <div>
-        <h4>Welcome!</h4>
-        <img
-            alt='This is a duck, because Redux!'
-            className={Classes.duck}
-            src={DuckImage}
-        />
-    </div>
+module.exports = () => {
 
-);
+    const { Duck } = internals;
+
+    return (
+
+        <div>
+            <h4>Welcome!</h4>
+            <Duck src={DuckImage} />
+        </div>
+    );
+};
+
+internals.Duck = Styled.img`
+    display: block;
+    width: 120px;
+    margin: 1.5rem auto;
+`;