Implement Redux example for counter

Author: at-zeel

package-lock.json

@@ -31,7 +31,10 @@
     }
   ],
   "devDependencies": {
-    "@pawjs/pawjs": "^2.2.3"
+    "@pawjs/pawjs": "^2.2.3",
+    "@pawjs/redux": "^2.1.6",
+    "react-redux": "^5.0.7",
+    "redux": "^4.0.1"
   },
   "license": "MIT",
   "bugs": {

package.json

@@ -0,0 +1,8 @@
+import { INCREMENT_COUNT, DECREMENT_COUNT } from './reducer';
+
+export const incrementCounter = () => ({
+  type: INCREMENT_COUNT,
+});
+export const decrementCounter = () => ({
+  type: DECREMENT_COUNT,
+});

src/app/components/home.js

@@ -0,0 +1,83 @@
+import React, { Component } from 'react';
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { decrementCounter, incrementCounter } from './actions';
+
+
+const styles = {
+  container: {
+    textAlign: 'center',
+    marginTop: '30px',
+  },
+  title: {
+    fontSize: '38px',
+  },
+  btn: {
+    margin: '18px',
+    backgroundColor: '#008CBA',
+    border: 'none',
+    padding: '12px 28px',
+    color: '#ffffff',
+    fontSize: '16px',
+    fontWeight: '800',
+  },
+  value: {
+    fontSize: '24px',
+    fontWeight: '900',
+  },
+
+};
+
+export default @connect(state => ({
+  counterValue: _.get(state.counter, 'count', 0),
+}))
+class Home extends Component {
+  static propTypes = {
+    dispatch: PropTypes.func,
+    counterValue: PropTypes.number,
+  };
+
+  static defaultProps = {
+    dispatch: () => {},
+    counterValue: 0,
+  };
+
+  incrementCounter(e) {
+    const { dispatch } = this.props;
+    if (e && e.preventDefault) {
+      e.preventDefault();
+    }
+    dispatch(incrementCounter());
+  }
+
+  decrementCounter(e) {
+    const { dispatch } = this.props;
+    if (e && e.preventDefault) {
+      e.preventDefault();
+    }
+    dispatch(decrementCounter());
+  }
+
+  render() {
+    const { counterValue } = this.props;
+    return (
+      <div style={styles.container}>
+        <h1 style={styles.title}>Redux Counter</h1>
+        <div>
+          <button type="button" onClick={e => this.incrementCounter(e)} style={styles.btn}>
+            Increment Counter
+          </button>
+        </div>
+        <div style={styles.value}>
+          {counterValue}
+        </div>
+        <div>
+          <button type="button" onClick={e => this.decrementCounter(e)} style={styles.btn}>
+            Decrement Counter
+          </button>
+        </div>
+      </div>
+    );
+  }
+}

src/app/components/home/actions.js

@@ -0,0 +1,23 @@
+import _ from 'lodash';
+
+const initialState = {
+  count: 5,
+};
+
+export const INCREMENT_COUNT = 'INCREMENT_COUNT';
+export const DECREMENT_COUNT = 'DECREMENT_COUNT';
+
+export const counter = (state = initialState, action) => {
+  switch (action.type) {
+    case INCREMENT_COUNT:
+      return _.assignIn({}, state, {
+        count: state.count + 1,
+      });
+    case DECREMENT_COUNT:
+      return _.assignIn({}, state, {
+        count: state.count - 1,
+      });
+    default:
+      return state;
+  }
+};

src/app/components/home/home.js

@@ -0,0 +1 @@
+export * from './components/home/reducer';

src/app/components/home/reducer.js

@@ -1 +1,27 @@
-export default class Client {}
+import ReduxClient from '@pawjs/redux/client';
+import * as AppReducers from './app/reducers';
+
+
+const AppInitialState = {
+  counter: {
+    count: 5,
+  },
+};
+export default class Client {
+  constructor({ addPlugin }) {
+    const reduxClient = new ReduxClient({ addPlugin });
+    reduxClient.setReducers(AppReducers);
+
+    addPlugin(reduxClient);
+  }
+
+  apply(clientHandler) {
+    clientHandler
+      .hooks
+      .reduxInitialState
+      .tapPromise('ReduxInitialState', async ({ getInitialState, setInitialState }) => {
+        const initialState = Object.assign({}, getInitialState(), AppInitialState);
+        setInitialState(initialState);
+      });
+  }
+}

src/app/reducers.js

@@ -13,7 +13,7 @@ export default class Routes {
       {
         path: '/',
         exact: true,
-        component: import('./app/components/home'),
+        component: import('./app/components/home/home'),
       },
     ];
 

src/client.js

@@ -1,12 +1,27 @@
-import React from 'react';
+import ReduxServer from '@pawjs/redux/server';
+import * as AppReducers from './app/reducers';
+
+const AppInitialState = {
+  counter: {
+    count: 5,
+  },
+};
+
 
 export default class Server {
+  constructor({ addPlugin }) {
+    const reduxServer = new ReduxServer({ addPlugin });
+    reduxServer.setReducers(AppReducers);
+    addPlugin(reduxServer);
+  }
+
   apply(serverHandler) {
-    serverHandler.hooks.beforeHtmlRender.tap('AddFontAwesomeIcons', (Application) => {
-      Application.htmlProps.head.push(
-        <script key="Font-Awesome Icons" async src="https://use.fontawesome.com/releases/v5.0.3/js/all.js" />,
-      );
-      return Application;
-    });
+    serverHandler
+      .hooks
+      .reduxInitialState
+      .tapPromise('AppInitialState', async ({ getInitialState, setInitialState }) => {
+        const initialState = Object.assign({}, getInitialState(), AppInitialState);
+        setInitialState(initialState);
+      });
   }
 }