init

.babelrc

@@ -0,0 +1,13 @@
+{
+  "presets": ["react", "es2015", "stage-0"],
+  "plugins": [
+    "transform-runtime",
+    "transform-decorators-legacy",
+    "lodash"
+  ],
+  "env": {
+    "development": {
+      "presets": ["react-hmre"]
+    }
+  }
+}

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintignore

@@ -0,0 +1,3 @@
+**/node_modules
+server.js
+webpack.*.js

.eslintrc

@@ -0,0 +1,27 @@
+{
+  "ecmaFeatures": {
+    "jsx": true,
+    "modules": true
+  },
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "parser": "babel-eslint",
+  "rules": {
+    "quotes": [2, "single"],
+    "strict": [2, "never"],
+    "babel/generator-star-spacing": 1,
+    "babel/new-cap": 1,
+    "babel/object-shorthand": 1,
+    "babel/arrow-parens": 1,
+    "babel/no-await-in-loop": 1,
+    "react/jsx-uses-react": 2,
+    "react/jsx-uses-vars": 2,
+    "react/react-in-jsx-scope": 2
+  },
+  "plugins": [
+    "babel",
+    "react"
+  ]
+}

.gitignore

@@ -0,0 +1,9 @@
+.DS_Store
+
+npm-debug.log
+
+bower_components
+node_modules
+
+config.js
+dist

.npmrc

@@ -0,0 +1 @@
+save-exact=true

README.md

@@ -0,0 +1,5 @@
+# redux-architecture
+
+> elm architecture in redux
+
+More information is coming. 

package.json

@@ -0,0 +1,50 @@
+{
+  "name": "redux-architecture",
+  "version": "0.0.0",
+  "private": true,
+  "main": "server.js",
+  "scripts": {
+    "start": "node server",
+    "build": "webpack --config webpack.production.js --progress && npm run clean && mv _dist dist",
+    "clean": "rimraf dist"
+  },
+  "devDependencies": {
+    "@ersinfotech/merge": "1.0.0",
+    "babel-core": "6.4.5",
+    "babel-eslint": "5.0.0-beta6",
+    "babel-loader": "6.2.1",
+    "babel-plugin-lodash": "2.0.1",
+    "babel-plugin-transform-decorators-legacy": "1.3.4",
+    "babel-plugin-transform-runtime": "6.3.13",
+    "babel-preset-es2015": "6.3.13",
+    "babel-preset-react": "6.3.13",
+    "babel-preset-react-hmre": "1.0.1",
+    "babel-preset-stage-0": "6.3.13",
+    "babel-runtime": "6.3.19",
+    "css-loader": "0.15.5",
+    "eslint": "1.10.3",
+    "eslint-plugin-babel": "3.0.0",
+    "eslint-plugin-react": "3.13.1",
+    "express": "4.13.3",
+    "extract-text-webpack-plugin": "0.8.2",
+    "file-loader": "0.8.4",
+    "html-webpack-plugin": "2.0.3",
+    "redux-logger": "0.0.3",
+    "rimraf": "2.4.3",
+    "style-loader": "0.12.3",
+    "webpack": "1.12.12",
+    "webpack-dev-middleware": "1.5.1",
+    "webpack-hot-middleware": "2.6.4"
+  },
+  "dependencies": {
+    "@jarvisaoieong/redux-logger": "2.5.0",
+    "@jarvisaoieong/redux-loop": "1.0.8",
+    "bluebird": "2.9.34",
+    "lodash": "4.0.1",
+    "react": "0.14.3",
+    "react-dom": "0.14.3",
+    "react-redux": "4.2.1",
+    "redux": "3.2.1",
+    "superagent": "jarvisaoieong/superagent#845d2eff7910f051f93420edb0c898038f3a33e5"
+  }
+}

server.js

@@ -0,0 +1,20 @@
+var express = require('express');
+var webpack = require('webpack');
+var webpackConfig = require('./webpack.development');
+
+var app = express();
+var compiler = webpack(webpackConfig);
+
+app.use(require('webpack-dev-middleware')(compiler, {
+  stats: {
+    colors: true,
+  },
+}));
+
+app.use(require('webpack-hot-middleware')(compiler));
+
+app.listen(process.env.PORT, function(err) {
+  if (err) {
+    console.log(err);
+  }
+});

src/components/counter/Counter.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import {inc, dec} from './counterActions';
+
+export default (props) => {
+  const {model, dispatch} = props;
+  return (
+    <div>
+      <button
+        style={{width: '50px'}}
+        onClick={() => dispatch(inc())}
+      >
+        +
+      </button>
+      <span
+        style={{paddingLeft: '50px', paddingRight: '50px'}}
+      >
+        {model}
+      </span>
+      <button
+        style={{width: '50px'}}
+        onClick={() => dispatch(dec())}
+      >
+        -
+      </button>
+    </div>
+  );
+}

src/components/counter/counterActions.js

@@ -0,0 +1,10 @@
+export const INC = 'INC';
+export const DEC = 'DEC';
+
+export const inc = () => ({
+  type: INC,
+});
+
+export const dec = () => ({
+  type: DEC,
+});

src/components/counter/counterInit.js

@@ -0,0 +1 @@
+export default (count = 0) => count

src/components/counter/counterReducer.js

@@ -0,0 +1,15 @@
+import {INC, DEC} from './counterActions';
+
+export const initialState = 0;
+
+export default (state = initialState, action) => {
+  if (action.type === INC) {
+    return state + 1;
+  }
+
+  if (action.type === DEC) {
+    return state - 1;
+  }
+
+  return state;
+}

src/components/counterFancy/CounterFancy.js

@@ -0,0 +1,33 @@
+import React, {Component} from 'react';
+import _ from 'lodash';
+
+import CounterWithRemoveButton from './CounterWithRemoveButton'
+import {add, modify} from './counterFancyActions';
+
+export default class CounterList extends Component {
+
+  render() {
+    const {model, dispatch} = this.props;
+
+    return (
+      <div>
+        <button
+          style={{width: '100px'}}
+          onClick={() => dispatch(add())}
+        >
+          ADD
+        </button>
+        {
+          _.map(model.counters, (counter) =>
+            <CounterWithRemoveButton {...{
+              key: counter.id,
+              model: counter,
+              dispatch,
+            }} />
+          )
+        }
+      </div>
+    );
+  }
+
+}

src/components/counterFancy/CounterWithRemoveButton.js

@@ -0,0 +1,32 @@
+import React, {Component} from 'react';
+
+import Counter from 'components/counter/Counter'
+import {remove, modify} from './counterFancyActions';
+
+export default class CounterWithRemoveButton extends Component {
+
+  render() {
+    const {model, dispatch} = this.props;
+
+    return (
+      <div>
+        <div style={{float: 'left'}}>
+          <Counter {...{
+            model: model.data,
+            dispatch: (action) => dispatch(modify(model.id, action)),
+          }} />
+        </div>
+        <div style={{float: 'left'}}>
+          <button
+            style={{width: '150px'}}
+            onClick={() => dispatch(remove(model.id))}
+          >
+            REMOVE
+          </button>
+        </div>
+        <div style={{clear: 'both'}}></div>
+      </div>
+    );
+  }
+
+}

src/components/counterFancy/counterFancyActions.js

@@ -0,0 +1,18 @@
+export const ADD = 'ADD_FANCY';
+export const REMOVE = 'REMOVE_FANCY';
+export const MODIFY = 'MODIFY_FANCY';
+
+export const add = () => ({
+  type: ADD,
+});
+
+export const remove = (id) => ({
+  type: REMOVE,
+  id,
+});
+
+export const modify = (id, action) => ({
+  type: MODIFY,
+  id,
+  action,
+});

src/components/counterFancy/counterFancyInit.js

@@ -0,0 +1,6 @@
+import counterInit from 'components/counter/counterInit';
+
+export default (count) => ({
+  counters: [{id: 0, data: counterInit(count)}],
+  nextId: 1,
+});

src/components/counterFancy/counterFancyReducer.js

@@ -0,0 +1,46 @@
+import {ADD, REMOVE, MODIFY} from './counterFancyActions';
+import _ from 'lodash';
+import counterReducer, {initialState as counterInitialState} from 'components/counter/counterReducer';
+import counterInit from 'components/counter/counterInit';
+
+export const initialState = {
+  counters: [{id: 0, data: counterInitialState}],
+  nextId: 1,
+}
+
+export default (state = initialState, action) => {
+  if (action.type === ADD) {
+    return {
+      ...state,
+      counters: [
+        ...state.counters,
+        {id: state.nextId, data: counterInit()},
+      ],
+      nextId: state.nextId + 1,
+    };
+  };
+
+  if (action.type === REMOVE) {
+    return {
+      ...state,
+      counters: _.reject(state.counters, (counter) => counter.id === action.id),
+    };
+  };
+
+  if (action.type === MODIFY) {
+    return {
+      ...state,
+      counters: _.map(state.counters, (counter) => {
+        if (counter.id !== action.id) {
+          return counter;
+        };
+        return {
+          ...counter,
+          data: counterReducer(counter.data, action.action),
+        };
+      }),
+    };
+  };
+
+  return state;
+}

src/components/counterList/CounterList.js

@@ -0,0 +1,39 @@
+import React, {Component} from 'react';
+import _ from 'lodash';
+
+import Counter from 'components/counter/Counter'
+import {add, modify, remove} from './counterListActions';
+
+export default class CounterList extends Component {
+
+  render() {
+    const {model, dispatch} = this.props;
+
+    return (
+      <div>
+        <button
+          style={{width: '100px'}}
+          onClick={() => dispatch(add())}
+        >
+          ADD
+        </button>
+        <button
+          style={{width: '100px'}}
+          onClick={() => dispatch(remove())}
+        >
+          REMOVE
+        </button>
+        {
+          _.map(model.counters, (counter) =>
+            <Counter {...{
+              key: counter.id,
+              model: counter.data,
+              dispatch: (action) => dispatch(modify(counter.id, action)),
+            }} />
+          )
+        }
+      </div>
+    );
+  }
+
+}