37 |
38 |
39 | ### Sponsors
40 | Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/react-pwa#sponsor)]
41 |
42 | 
43 | 
44 | 
45 | 
46 | 
47 | 
48 | 
49 | 
50 | 
51 | 
52 |
53 | ### Supporters
54 | ##### Atyantik Technologies Private Limited
55 | Everyone at Atyantik Technologies is contributing their free time for contributing to the project and core discussions.
56 | 
57 |
58 |
59 | ### License
60 | This project is licensed under the MIT license, Copyright (c) 2018 [Atyantik Technologies Private Limited](https://www.atyantik.com). For more information see [LICENSE.md](https://github.com/Atyantik/example-pawjs-redux/blob/master/LICENSE.md).
61 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "example-pawjs-redux",
3 | "version": "1.0.0",
4 | "description": "Example on using Redux with PawJS",
5 | "scripts": {
6 | "start": "pawjs --env=development start",
7 | "build": "pawjs --env=production --config=prod.pawconfig.json build"
8 | },
9 | "repository": {
10 | "type": "git",
11 | "url": "git+https://github.com/Atyantik/example-pawjs-redux.git"
12 | },
13 | "author": {
14 | "name": "Atyantik Technologies",
15 | "email": "admin@atyantik.com",
16 | "url": "https://www.atyantik.com/"
17 | },
18 | "engines": {
19 | "node": ">=10.11.0"
20 | },
21 | "contributors": [
22 | {
23 | "name": "Tirth Bodawala",
24 | "email": "tirthbodawala@atyantik.com",
25 | "url": "https://www.atyantik.com/"
26 | },
27 | {
28 | "name": "Yash Thakur",
29 | "email": "thakur.yash514@gmail.com",
30 | "url": "http://yashthakur.in/"
31 | }
32 | ],
33 | "devDependencies": {
34 | "@pawjs/pawjs": "^2.2.6",
35 | "@pawjs/redux": "^2.1.6",
36 | "react-redux": "^5.0.7",
37 | "redux": "^4.0.1"
38 | },
39 | "license": "MIT",
40 | "bugs": {
41 | "url": "https://github.com/Atyantik/example-pawjs-redux/issues"
42 | },
43 | "homepage": "https://github.com/Atyantik/example-pawjs-redux#readme",
44 | "dependencies": {
45 | "classnames": "^2.2.6"
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/pawconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "port": "3003",
3 | "host": "0.0.0.0",
4 | "appRootUrl": "/",
5 | "serviceWorker": false,
6 | "serverSideRender": true,
7 | "singlePageApplication": false
8 | }
9 |
--------------------------------------------------------------------------------
/prod.pawconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "port": "9005",
3 | "host": "0.0.0.0",
4 | "appRootUrl": "/examples/redux",
5 | "serviceWorker": true,
6 | "asyncCSS": false,
7 | "serverSideRender": true,
8 | "singlePageApplication": false
9 | }
10 |
--------------------------------------------------------------------------------
/src/app/components/home/actions.js:
--------------------------------------------------------------------------------
1 | import { INCREMENT_COUNT, DECREMENT_COUNT } from './reducer';
2 |
3 | export const incrementCounter = () => ({
4 | type: INCREMENT_COUNT,
5 | });
6 | export const decrementCounter = () => ({
7 | type: DECREMENT_COUNT,
8 | });
9 |
--------------------------------------------------------------------------------
/src/app/components/home/home.css:
--------------------------------------------------------------------------------
1 | body{
2 | font-family: sans-serif;
3 | }
4 | .container {
5 | text-align: center;
6 | margin-top: 30px;
7 | }
8 | .title {
9 | font-size: 38px;
10 | text-align: left;
11 | margin-bottom: 0;
12 | }
13 | .btn {
14 | margin: 18px;
15 | background-color: #308CBA;
16 | border: none;
17 | padding: 12px 28px;
18 | color: #ffffff;
19 | font-size: 16px;
20 | font-weight: 800;
21 | margin-left: 0;
22 | }
23 | .value {
24 | font-size: 180px;
25 | font-weight: 900;
26 | }
27 | .row{
28 | display: flex;
29 | flex-wrap: wrap;
30 | width: 100%;
31 | justify-content: space-evenly;
32 | align-items: center;
33 | }
34 | .mw500{
35 | max-width: 500px;
36 | margin: 0 auto;
37 | }
38 | .mw800{
39 | max-width: 800px;
40 | margin: 0 auto;
41 | margin-top: 2rem;
42 | border-top: 1px solid #000;
43 | }
44 | .col12{
45 | width: 100%;
46 | float: left;
47 | text-align: left;
48 | }
49 | .col6{
50 | width: 50%;
51 | float: left;
52 | text-align: right;
53 | }
54 | .col8{
55 | width: 60%;
56 | float: left;
57 | text-align: left;
58 | }
59 | .col4{
60 | width: 40%;
61 | float: left;
62 | }
63 | .col6md{
64 | width: 50%;
65 | float: left;
66 | }
67 | .p1 {
68 | padding: 1rem 0;
69 | }
70 | .p2 {
71 | padding: 2rem 0;
72 | }
73 | .mt{
74 | margin-top: 3rem;
75 | }
76 | .black{
77 | background-color: black;
78 | text-decoration: none;
79 | }
80 | .link{
81 | text-decoration: none;
82 | color: #308CBA;
83 | font-weight: 600;
84 | }
85 | @media (max-width: 575px) {
86 | .col6{
87 | width: 100%;
88 | text-align: center;
89 | }
90 | .col4{
91 | width: 100%;
92 | text-align: center;
93 | }
94 | .col8{
95 | width: 100%;
96 | text-align: center;
97 | }
98 | .value{
99 | font-size: 100px;
100 | }
101 | .col12{
102 | text-align: center;
103 | }
104 | .title{
105 | text-align: center;
106 | }
107 |
108 | }
109 |
--------------------------------------------------------------------------------
/src/app/components/home/home.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import _ from 'lodash';
3 | import PropTypes from 'prop-types';
4 | import { connect } from 'react-redux';
5 | import classNames from 'classnames';
6 | import { decrementCounter, incrementCounter } from './actions';
7 |
8 | // import custom CSS
9 | import styles from './home.css';
10 |
11 | export default @connect(state => ({
12 | counterValue: _.get(state.counter, 'count', 0),
13 | }))
14 | class Home extends Component {
15 | static propTypes = {
16 | dispatch: PropTypes.func,
17 | counterValue: PropTypes.number,
18 | };
19 |
20 | static defaultProps = {
21 | dispatch: () => {},
22 | counterValue: 0,
23 | };
24 |
25 | incrementCounter(e) {
26 | const { dispatch } = this.props;
27 | if (e && e.preventDefault) {
28 | e.preventDefault();
29 | }
30 | dispatch(incrementCounter());
31 | }
32 |
33 | decrementCounter(e) {
34 | const { dispatch } = this.props;
35 | if (e && e.preventDefault) {
36 | e.preventDefault();
37 | }
38 | dispatch(decrementCounter());
39 | }
40 |
41 | render() {
42 | const { counterValue } = this.props;
43 | return (
44 | 
125 |
126 |