Merge pull request Atyantik#1 from zeel123/master

Implement Redux example for counter

Author: yash-thakur

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,20 @@
+.container {
+    text-align: center;
+    margin-top: 30px;
+}
+.title {
+    font-size: 38px;
+}
+.btn {
+    margin: 18px;
+    background-color: #008CBA;
+    border: none;
+    padding: 12px 28px;
+    color: #ffffff;
+    font-size: 16px;
+    font-weight: 800;
+}
+.value {
+    font-size: 24px;
+    font-weight: 900;
+}

src/app/components/home/actions.js

@@ -0,0 +1,61 @@
+import React, { Component } from 'react';
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { decrementCounter, incrementCounter } from './actions';
+
+// import custom CSS
+import styles from './home.css';
+
+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 className={styles.container}>
+        <h1 className={styles.title}>Redux Counter</h1>
+        <div>
+          <button type="button" onClick={e => this.incrementCounter(e)} className={styles.btn}>
+            Increment Counter
+          </button>
+        </div>
+        <div className={styles.value}>
+          {counterValue}
+        </div>
+        <div>
+          <button type="button" onClick={e => this.decrementCounter(e)} className={styles.btn}>
+            Decrement Counter
+          </button>
+        </div>
+      </div>
+    );
+  }
+}

src/app/components/home/home.css

@@ -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'),
       },
     ];