finished simple example

client/actions/index.js

@@ -1,6 +1,6 @@
-import { valueAdded } from './constants';
+import { valueAdded } from '../constants';
 
-export const addValue = value => {
+export const add = value => {
     return {
         type: valueAdded,
         value

client/components/add.js

@@ -0,0 +1,24 @@
+import { add } from '../actions';
+
+const addComponent = store => {
+    const valueAdded = () => {
+        const value = document.getElementById('text-value').value;
+        document.getElementById('text-value').value = '';
+        store.dispatch(add(value));
+    };
+
+    const render = () => {
+        const input = '<input type="text" id="text-value"/><button id="add-button">add</button>';
+        document.write(input);
+        document.getElementById('add-button')
+           .addEventListener('click', valueAdded);
+    };
+
+    // store.subscribe(() => {
+    //     render();
+    // });
+
+    render();
+};
+
+export default addComponent;

client/components/list.js

@@ -0,0 +1,18 @@
+const list = store => {
+    const render = items => {
+        const listItems = store.getState().list.values;
+
+        const listLis = listItems.map(item => `<li>${item}</li>`).join('');
+        const html = `<ul>${listLis}</ul>`;
+
+        document.getElementById('list').innerHTML = html;
+    };
+
+    store.subscribe(() => {
+        render();
+    });
+
+    render();
+};
+
+export default list;

client/index.js

@@ -1,3 +1,5 @@
 import store from './store';
 
-document.write('hi');
+import page1 from './pages/page1';
+
+page1(store);

client/pages/page1.js

@@ -0,0 +1,10 @@
+import list from '../components/list';
+import add from '../components/add';
+
+const page1 = store => {
+    document.write('<div id="list"></div><div id="add"></div>');
+    list(store);
+    add(store);
+};
+
+export default page1;

client/reducers/reducerA.js → client/reducers/list.js

@@ -3,12 +3,12 @@ import { valueAdded } from '../constants';
 export default (state, action) => {
     if (!state) {
         return {
-            values: []
+            values: ['a']
         };
     }
 
     if (action.type === valueAdded) {
-        state.values = state.values.concat([action.newValue]);
+        state.values = state.values.concat([action.value]);
     }
 
     return state;

client/store/index.js

@@ -1,10 +1,10 @@
 import { createStore, applyMiddleware, combineReducers } from 'redux';
 import thunkMiddleware from 'redux-thunk';
-import reducerA from '../reducers/reducerA';
+import list from '../reducers/list';
 import createLogger from 'redux-logger';
 
 const reducers = combineReducers({
-    reducerA
+    list
 });
 
 const createStoreWithMiddleware = applyMiddleware(

webpack.config.js

@@ -52,7 +52,7 @@ const config = {
 };
 
 
-if (env === 'dev') {
+if (env !== 'prod') {
     new WebpackDevServer(webpack(config), {
         contentBase: './public',
         historyApiFallback: true,