Add redux-actions. Upgrade dependencies

README.md

@@ -1,9 +1,10 @@
 [See in action](https://vinogradov.github.io/react-starter-kit)
 
-Includes only the latest and greatest web technologies (dependencies updated at 22 July 2017). Use it for your next heroic SPA project because you can't go wrong with it. Contains minimal viable "hello, world" code just to proof it works. Remove hello world and write your own great project.
+Includes only the latest and greatest web technologies (dependencies updated at 28 July 2017). Use it for your next heroic SPA project because you can't go wrong with it. Contains minimal viable "hello, world" code just to proof it works. Remove hello world and write your own great project.
 
 # Principles
 1. Using plain [ES2015](https://babeljs.io/docs/plugins/preset-es2015/)/[16](https://babeljs.io/docs/plugins/preset-es2016/)/[17](https://babeljs.io/docs/plugins/preset-es2017/). Minimizing use of [experimental Stage-X](https://babeljs.io/docs/plugins/#presets-stage-x-experimental-presets-) javascript features. Only [stage-3](https://babeljs.io/docs/plugins/preset-stage-3/)/4 features are supported, because they're relatively stable
+1. Using [redux-actions](https://github.com/acdlite/redux-actions) methodology for Redux
 1. Using tests (by [jest](https://github.com/facebook/jest), [example](https://github.com/vinogradov/react-starter-kit/blob/master/src/examples/react/__tests__/hello.test.js))
 1. Using linting (by [airbnb eslint config](https://github.com/airbnb/javascript))
 1. Using git [pre-push hook](https://git-scm.com/book/gr/v2/Customizing-Git-Git-Hooks) to force run tests and linting before push
@@ -24,6 +25,7 @@ Name | Library Type | Original Description | Example Config | Notes
 [react-router](https://github.com/ReactTraining/react-router) | Routing | Declarative routing for React 
 [redux](https://github.com/reactjs/redux/) | Data management | Predictable state container for JavaScript apps
 [react-redux](https://github.com/reactjs/react-redux) | Data management | Official React bindings for Redux
+[redux-actions](https://github.com/acdlite/redux-actions) | Data management | Flux Standard Action utilities for Redux
 [redux-thunk](https://github.com/gaearon/redux-thunk) | Data management | Thunk middleware for Redux
 [redux-saga](https://github.com/redux-saga/redux-saga) | Data management | An alternative side effect model for Redux apps | | An alternative to [redux-thunk](https://github.com/gaearon/redux-thunk). You need to `import "regenerator-runtime/runtime";` for using generators/`yield`
 [redux-logger](https://github.com/evgenyrodionov/redux-logger) | Utils | Logger for Redux

package.json

@@ -44,12 +44,13 @@
     "react-router-dom": "4.1.1",
     "react-test-renderer": "15.6.1",
     "redux": "3.7.2",
+    "redux-actions": "2.2.1",
     "redux-logger": "3.0.6",
     "redux-saga": "0.15.4",
     "redux-thunk": "2.2.0",
     "script-ext-html-webpack-plugin": "1.8.5",
     "style-loader": "0.18.2",
-    "webpack": "3.3.0",
+    "webpack": "3.4.1",
     "webpack-bundle-analyzer": "2.8.3",
     "webpack-chunk-hash": "0.4.0"
   },

src/entry.js

@@ -5,3 +5,4 @@ import 'file-loader?name=[name].[ext]!./favicon.ico';
 import './examples/react/index';
 // import './examples/redux/one-file';
 // import './examples/redux/separate-files';
+// import './examples/redux/separate-files-redux-actions';

src/examples/redux/separate-files-redux-actions/actions.js

@@ -0,0 +1,11 @@
+import {createActions} from 'redux-actions';
+
+export const {
+  action1,
+  action2,
+  action3
+} = createActions(
+  'ACTION1',
+  'ACTION2',
+  'ACTION3'
+);

src/examples/redux/separate-files-redux-actions/index.js

@@ -0,0 +1,17 @@
+import {createStore, applyMiddleware, combineReducers} from 'redux';
+import createSagaMiddleware from 'redux-saga';
+import 'regenerator-runtime/runtime'; // eslint-disable-line import/no-extraneous-dependencies
+import logger from 'redux-logger';
+import reducer from './reducers';
+import sagas from './sagas';
+import {action1} from './actions';
+
+const sagaMiddleware = createSagaMiddleware();
+
+const store = createStore(
+  combineReducers({reducer}),
+  applyMiddleware(sagaMiddleware, logger));
+
+sagaMiddleware.run(sagas);
+
+store.dispatch(action1({value1: 1}));

src/examples/redux/separate-files-redux-actions/reducers.js

@@ -0,0 +1,25 @@
+import {handleActions} from 'redux-actions';
+import {
+  action1,
+  action2,
+  action3} from './actions';
+
+const INITIAL_STATE = {};
+
+export default handleActions({
+  [action1](state, {payload: {value1}}) {
+    return {
+      ...state,
+      value1
+    };
+  },
+  [action2](state, {payload: {value2}}) {
+    return {
+      ...state,
+      value2
+    };
+  },
+  [action3]() {
+    return INITIAL_STATE;
+  }
+}, INITIAL_STATE);

src/examples/redux/separate-files-redux-actions/sagas.js

@@ -0,0 +1,9 @@
+import {take} from 'redux-saga/effects';
+import {action1} from './actions';
+
+export default function* watchAction1() {
+  while (true) { // eslint-disable-line no-constant-condition
+    yield take(action1);
+    console.log('watchAction1 saga!'); // eslint-disable-line no-console
+  }
+}

webpack.config.js

@@ -169,15 +169,18 @@ module.exports = (env) => {
       //   poll: true,
       // },
       contentBase: DIST_PATH,
+
       host: '0.0.0.0',
+      // disableHostCheck: true,
+
       // proxy requests to the backend
       // TODO: this setting doesn't work with 'historyApiFallback: true'
       // proxy: {
       //     '*': 'http://localhost'
       // },
 
       // this setting is needed to support react-router
-      // TODO: this setting doesn't work with 'proxy'
+      // TODO: this setting doesn't work with 'proxy' *
       historyApiFallback: true
     }
   };