├── .prettierignore
├── .github
    └── FUNDING.yml
├── now.json
├── .prettierrc
├── public
    ├── favicon.ico
    ├── manifest.json
    └── index.html
├── src
    ├── modules
    │   ├── index.js
    │   └── counter.js
    ├── containers
    │   ├── about
    │   │   └── index.js
    │   ├── app
    │   │   └── index.js
    │   └── home
    │   │   └── index.js
    ├── index.css
    ├── index.js
    └── store.js
├── renovate.json
├── .gitignore
├── README.md
├── package.json
└── LICENSE


/.prettierignore:
--------------------------------------------------------------------------------
1 | package.json


--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | github: notrab
2 | 


--------------------------------------------------------------------------------
/now.json:
--------------------------------------------------------------------------------
1 | {
2 |   "alias": "create-react-app-redux.now.sh"
3 | }
4 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "singleQuote": true,
3 |   "semi": false,
4 |   "jsxBracketSameLine": true
5 | }


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/notrab/create-react-app-redux/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/modules/index.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux'
2 | import counter from './counter'
3 | 
4 | export default combineReducers({
5 |   counter
6 | })
7 | 


--------------------------------------------------------------------------------
/renovate.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": ["config:base"],
3 |   "automerge": true,
4 |   "major": {
5 |     "automerge": false
6 |   },
7 |   "reviewers": ["notrab"]
8 | }
9 | 


--------------------------------------------------------------------------------
/src/containers/about/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | const About = () => (
 4 |   <div>
 5 |     <h1>About Page</h1>
 6 |     <p>Did you get here via Redux?</p>
 7 |   </div>
 8 | )
 9 | 
10 | export default About
11 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | html {
 2 |   font-size: 100%;
 3 | }
 4 | 
 5 | body {
 6 |   margin: 0;
 7 |   padding: 0;
 8 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
 9 |     sans-serif;
10 |   font-size: 1rem;
11 |   line-height: 1.5;
12 | }
13 | 
14 | button:disabled {
15 |   opacity: 0.5;
16 | }
17 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | node_modules
 5 | 
 6 | # testing
 7 | coverage
 8 | 
 9 | # production
10 | build
11 | 
12 | # misc
13 | .DS_Store
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 | 
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 | package-lock.json


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React + Redux App",
 3 |   "name": "Create React App Redux",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     }
10 |   ],
11 |   "start_url": "./index.html",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/src/containers/app/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Route, Link } from 'react-router-dom'
 3 | import Home from '../home'
 4 | import About from '../about'
 5 | 
 6 | const App = () => (
 7 |   <div>
 8 |     <header>
 9 |       <Link to="/">Home</Link>
10 |       <Link to="/about-us">About</Link>
11 |     </header>
12 | 
13 |     <main>
14 |       <Route exact path="/" component={Home} />
15 |       <Route exact path="/about-us" component={About} />
16 |     </main>
17 |   </div>
18 | )
19 | 
20 | export default App
21 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { render } from 'react-dom'
 3 | import { Provider } from 'react-redux'
 4 | import { ConnectedRouter } from 'connected-react-router'
 5 | import store, { history } from './store'
 6 | import App from './containers/app'
 7 | 
 8 | import 'sanitize.css/sanitize.css'
 9 | import './index.css'
10 | 
11 | const target = document.querySelector('#root')
12 | 
13 | render(
14 |   <Provider store={store}>
15 |     <ConnectedRouter history={history}>
16 |       <div>
17 |         <App />
18 |       </div>
19 |     </ConnectedRouter>
20 |   </Provider>,
21 |   target
22 | )
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <p align="center"><a href="https://medium.com/@notrab/getting-started-with-create-react-app-redux-react-router-redux-thunk-d6a19259f71f"><img src="https://i.imgur.com/PATsTx2.png" title="View tutorial" alt="React, React Router, Redux and Redux Thunk" width="900"></a></p>
 2 | 
 3 | * Tutorial: [Getting started with create-react-app, Redux, React Router & Redux Thunk](https://medium.com/@notrab/getting-started-with-create-react-app-redux-react-router-redux-thunk-d6a19259f71f)
 4 | 
 5 | ## Installation
 6 | 
 7 | ```bash
 8 | git clone https://github.com/notrab/create-react-app-redux.git
 9 | cd create-react-app-redux
10 | yarn
11 | ```
12 | 
13 | ## Get started
14 | 
15 | ```bash
16 | yarn start
17 | ```
18 | 
19 | This boilerplate is built using [create-react-app](https://github.com/facebook/create-react-app) so you will want to read the User Guide for more goodies.
20 | 


--------------------------------------------------------------------------------
/src/store.js:
--------------------------------------------------------------------------------
 1 | import { createStore, applyMiddleware, compose } from 'redux'
 2 | import { connectRouter, routerMiddleware } from 'connected-react-router'
 3 | import thunk from 'redux-thunk'
 4 | import * as History from 'history'
 5 | import rootReducer from './modules'
 6 | 
 7 | export const history = History.createBrowserHistory()
 8 | 
 9 | const initialState = {}
10 | const enhancers = []
11 | const middleware = [thunk, routerMiddleware(history)]
12 | 
13 | if (process.env.NODE_ENV === 'development') {
14 |   const devToolsExtension = window.__REDUX_DEVTOOLS_EXTENSION__
15 | 
16 |   if (typeof devToolsExtension === 'function') {
17 |     enhancers.push(devToolsExtension())
18 |   }
19 | }
20 | 
21 | const composedEnhancers = compose(
22 |   applyMiddleware(...middleware),
23 |   ...enhancers
24 | )
25 | 
26 | export default createStore(
27 |   connectRouter(history)(rootReducer),
28 |   initialState,
29 |   composedEnhancers
30 | )
31 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "homepage": "https://create-react-app-redux.now.sh",
 4 |   "scripts": {
 5 |     "deploy": "now && now alias",
 6 |     "start": "react-scripts start",
 7 |     "now-start": "serve -s ./build",
 8 |     "build": "react-scripts build",
 9 |     "test": "react-scripts test --env=jsdom",
10 |     "eject": "react-scripts eject",
11 |     "precommit": "pretty-quick --staged"
12 |   },
13 |   "devDependencies": {
14 |     "prettier": "2.7.1",
15 |     "react-scripts": "2.1.8"
16 |   },
17 |   "dependencies": {
18 |     "connected-react-router": "4.5.0",
19 |     "react": "16.14.0",
20 |     "react-dom": "16.14.0",
21 |     "react-redux": "5.1.2",
22 |     "react-router": "4.4.0-beta.8",
23 |     "react-router-dom": "4.4.0-beta.8",
24 |     "redux": "4.2.1",
25 |     "redux-thunk": "2.4.2",
26 |     "sanitize.css": "11.0.1",
27 |     "serve": "10.1.2"
28 |   },
29 |   "browserslist": [
30 |     ">0.2%",
31 |     "not dead",
32 |     "not ie <= 11",
33 |     "not op_mini all"
34 |   ]
35 | }
36 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Jamie Barton
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/containers/home/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { push } from 'connected-react-router'
 3 | import { bindActionCreators } from 'redux'
 4 | import { connect } from 'react-redux'
 5 | import {
 6 |   increment,
 7 |   incrementAsync,
 8 |   decrement,
 9 |   decrementAsync
10 | } from '../../modules/counter'
11 | 
12 | const Home = props => (
13 |   <div>
14 |     <h1>Home</h1>
15 |     <p>Count: {props.count}</p>
16 | 
17 |     <p>
18 |       <button onClick={props.increment}>Increment</button>
19 |       <button onClick={props.incrementAsync} disabled={props.isIncrementing}>
20 |         Increment Async
21 |       </button>
22 |     </p>
23 | 
24 |     <p>
25 |       <button onClick={props.decrement}>Decrement</button>
26 |       <button onClick={props.decrementAsync} disabled={props.isDecrementing}>
27 |         Decrement Async
28 |       </button>
29 |     </p>
30 | 
31 |     <p>
32 |       <button onClick={() => props.changePage()}>
33 |         Go to about page via redux
34 |       </button>
35 |     </p>
36 |   </div>
37 | )
38 | 
39 | const mapStateToProps = ({ counter }) => ({
40 |   count: counter.count,
41 |   isIncrementing: counter.isIncrementing,
42 |   isDecrementing: counter.isDecrementing
43 | })
44 | 
45 | const mapDispatchToProps = dispatch =>
46 |   bindActionCreators(
47 |     {
48 |       increment,
49 |       incrementAsync,
50 |       decrement,
51 |       decrementAsync,
52 |       changePage: () => push('/about-us')
53 |     },
54 |     dispatch
55 |   )
56 | 
57 | export default connect(
58 |   mapStateToProps,
59 |   mapDispatchToProps
60 | )(Home)
61 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 7 |   <meta name="theme-color" content="#000000">
 8 |   <!--
 9 |       manifest.json provides metadata used when your web app is added to the
10 |       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
11 |     -->
12 |   <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
13 |   <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
14 |   <!--
15 |       Notice the use of %PUBLIC_URL% in the tags above.
16 |       It will be replaced with the URL of the `public` folder during the build.
17 |       Only files inside the `public` folder can be referenced from the HTML.
18 | 
19 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
20 |       work correctly both with client-side routing and a non-root public URL.
21 |       Learn how to configure a non-root public URL by running `npm run build`.
22 |     -->
23 |   <title>React App</title>
24 | </head>
25 | 
26 | <body>
27 |   <noscript>
28 |     You need to enable JavaScript to run this app.
29 |   </noscript>
30 |   <div id="root"></div>
31 |   <!--
32 |       This HTML file is a template.
33 |       If you open it directly in the browser, you will see an empty page.
34 | 
35 |       You can add webfonts, meta tags, or analytics to this file.
36 |       The build step will place the bundled scripts into the <body> tag.
37 | 
38 |       To begin the development, run `npm start` or `yarn start`.
39 |       To create a production bundle, use `npm run build` or `yarn build`.
40 |     -->
41 | </body>
42 | 
43 | </html>


--------------------------------------------------------------------------------
/src/modules/counter.js:
--------------------------------------------------------------------------------
 1 | export const INCREMENT_REQUESTED = 'counter/INCREMENT_REQUESTED'
 2 | export const INCREMENT = 'counter/INCREMENT'
 3 | export const DECREMENT_REQUESTED = 'counter/DECREMENT_REQUESTED'
 4 | export const DECREMENT = 'counter/DECREMENT'
 5 | 
 6 | const initialState = {
 7 |   count: 0,
 8 |   isIncrementing: false,
 9 |   isDecrementing: false
10 | }
11 | 
12 | export default (state = initialState, action) => {
13 |   switch (action.type) {
14 |     case INCREMENT_REQUESTED:
15 |       return {
16 |         ...state,
17 |         isIncrementing: true
18 |       }
19 | 
20 |     case INCREMENT:
21 |       return {
22 |         ...state,
23 |         count: state.count + 1,
24 |         isIncrementing: !state.isIncrementing
25 |       }
26 | 
27 |     case DECREMENT_REQUESTED:
28 |       return {
29 |         ...state,
30 |         isDecrementing: true
31 |       }
32 | 
33 |     case DECREMENT:
34 |       return {
35 |         ...state,
36 |         count: state.count - 1,
37 |         isDecrementing: !state.isDecrementing
38 |       }
39 | 
40 |     default:
41 |       return state
42 |   }
43 | }
44 | 
45 | export const increment = () => {
46 |   return dispatch => {
47 |     dispatch({
48 |       type: INCREMENT_REQUESTED
49 |     })
50 | 
51 |     dispatch({
52 |       type: INCREMENT
53 |     })
54 |   }
55 | }
56 | 
57 | export const incrementAsync = () => {
58 |   return dispatch => {
59 |     dispatch({
60 |       type: INCREMENT_REQUESTED
61 |     })
62 | 
63 |     return setTimeout(() => {
64 |       dispatch({
65 |         type: INCREMENT
66 |       })
67 |     }, 3000)
68 |   }
69 | }
70 | 
71 | export const decrement = () => {
72 |   return dispatch => {
73 |     dispatch({
74 |       type: DECREMENT_REQUESTED
75 |     })
76 | 
77 |     dispatch({
78 |       type: DECREMENT
79 |     })
80 |   }
81 | }
82 | 
83 | export const decrementAsync = () => {
84 |   return dispatch => {
85 |     dispatch({
86 |       type: DECREMENT_REQUESTED
87 |     })
88 | 
89 |     return setTimeout(() => {
90 |       dispatch({
91 |         type: DECREMENT
92 |       })
93 |     }, 3000)
94 |   }
95 | }
96 | 


--------------------------------------------------------------------------------