Simpler setup

Author: notrab

package.json

@@ -3,16 +3,18 @@
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
- "react-scripts": "0.8.4"
+ "react-scripts": "^0.9.5"
  },
  "dependencies": {
  "react": "^15.4.2",
  "react-dom": "^15.4.2",
- "react-redux": "^5.0.1",
- "react-router": "^3.0.0",
- "react-router-redux": "^4.0.7",
+ "react-redux": "^5.0.3",
+ "react-router": "^4.0.0",
+ "react-router-dom": "^4.0.0",
+ "react-router-redux": "next",
  "redux": "^3.6.0",
- "redux-thunk": "^2.1.0"
+ "redux-thunk": "^2.2.0",
+ "sanitize.css": "^5.0.0"
  },
  "scripts": {
  "start": "react-scripts start",

src/containers/about/index.js

@@ -1,8 +1,10 @@
 import React from 'react'
 
-export default () => (
+const About = () => (
  <div>
- <h1>About Us</h1>
- <p>We are interesting. I promise!</p>
+ <h1>About Page</h1>
+ <p>Did you get here via Redux?</p>
  </div>
 )
+
+export default About

src/containers/app/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { Link } from 'react-router'
+import { Link } from 'react-router-dom'
 
-export default ({ children }) => (
+const App = ({ children }) => (
  <div>
  <header>
  <Link to="/">Home</Link>
@@ -13,3 +13,5 @@ export default ({ children }) => (
  </main>
  </div>
 )
+
+export default App

src/containers/home/index.js

@@ -1,24 +1,32 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { push } from 'react-router-redux'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
-import { incrementAsync, decrementAsync } from '../../modules/counter'
+import {
+ increment,
+ incrementAsync,
+ decrement,
+ decrementAsync
+} from '../../modules/counter'
 
-class Home extends Component {
- render() {
- const { count, incrementAsync, decrementAsync, isIncrementing, isDecrementing, changePage } = this.props
+const Home = props => (
+ <div>
+ <h1>Home</h1>
+ <p>Count: {props.count}</p>
 
- return (
- <div>
- <h1>Home</h1>
- <p>Welcome home!</p>
- <p>Count: {count}</p>
- <p><button onClick={incrementAsync} disabled={isIncrementing}>Increment Async</button> <button onClick={decrementAsync} disabled={isDecrementing}>Decrement Async</button></p>
- <button onClick={() => changePage()}>Go to about page via redux</button>
- </div>
- )
- }
-}
+ <p>
+ <button onClick={props.increment} disabled={props.isIncrementing}>Increment</button>
+ <button onClick={props.incrementAsync} disabled={props.isIncrementing}>Increment Async</button>
+ </p>
+
+ <p>
+ <button onClick={props.decrement} disabled={props.isDecrementing}>Decrementing</button>
+ <button onClick={props.decrementAsync} disabled={props.isDecrementing}>Decrement Async</button>
+ </p>
+
+ <p><button onClick={() => props.changePage()}>Go to about page via redux</button></p>
+ </div>
+)
 
 const mapStateToProps = state => ({
  count: state.counter.count,
@@ -27,11 +35,16 @@ const mapStateToProps = state => ({
 })
 
 const mapDispatchToProps = dispatch => bindActionCreators({
+ increment,
  incrementAsync,
+ decrement,
  decrementAsync,
  changePage: () => {
  dispatch(push('/about-us'))
  }
 }, dispatch)
 
-export default connect(mapStateToProps, mapDispatchToProps)(Home)
+export default connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(Home)

src/index.css

@@ -1,5 +1,11 @@
+html {
+ font-size: 100%;
+}
+
 body {
  margin: 0;
  padding: 0;
- font-family: sans-serif;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+ font-size: 1rem;
+ line-height: 1.5;
 }

src/index.js

@@ -1,17 +1,26 @@
 import React from 'react'
 import { render } from 'react-dom'
 import { Provider } from 'react-redux'
-import store from './store'
-
-import Routes from './routes'
+import { Route } from 'react-router'
+import { ConnectedRouter } from 'react-router-redux'
+import store, { history } from './store'
+import App from './containers/app'
+import Home from './containers/home'
+import About from './containers/about'
 
+import 'sanitize.css/sanitize.css'
 import './index.css'
 
 const target = document.querySelector('#root')
 
 render(
  <Provider store={store}>
- <Routes />
+ <ConnectedRouter history={history}>
+ <App>
+ <Route exact path="/" component={Home} />
+ <Route exact path="/about-us" component={About} />
+ </App>
+ </ConnectedRouter>
  </Provider>,
  target
 )

src/modules/counter.js

@@ -42,6 +42,18 @@ export default (state = initialState, action) => {
  }
 }
 
+export const increment = () => {
+ return dispatch => {
+ dispatch({
+ type: INCREMENT_REQUESTED
+ })
+
+ dispatch({
+ type: INCREMENT
+ })
+ }
+}
+
 export const incrementAsync = () => {
  return dispatch => {
  dispatch({
@@ -56,6 +68,18 @@ export const incrementAsync = () => {
  }
 }
 
+export const decrement = () => {
+ return dispatch => {
+ dispatch({
+ type: DECREMENT_REQUESTED
+ })
+
+ dispatch({
+ type: DECREMENT
+ })
+ }
+}
+
 export const decrementAsync = () => {
  return dispatch => {
  dispatch({

src/modules/index.js

@@ -3,6 +3,6 @@ import { routerReducer } from 'react-router-redux'
 import counter from './counter'
 
 export default combineReducers({
- routing: routerReducer,
+ router: routerReducer,
  counter
 })

src/routes.js

@@ -0,0 +1,35 @@
+import { createStore, applyMiddleware, compose } from 'redux'
+import { routerMiddleware } from 'react-router-redux'
+import thunk from 'redux-thunk'
+import createHistory from 'history/createBrowserHistory'
+import rootReducer from './modules'
+
+export const history = createHistory()
+
+const initialState = {}
+const enhancers = []
+const middleware = [
+ thunk,
+ routerMiddleware(history)
+]
+
+if (process.env.NODE_ENV === 'development') {
+ const devToolsExtension = window.devToolsExtension
+
+ if (typeof devToolsExtension === 'function') {
+ enhancers.push(devToolsExtension())
+ }
+}
+
+const composedEnhancers = compose(
+ applyMiddleware(...middleware),
+ ...enhancers
+)
+
+const store = createStore(
+ rootReducer,
+ initialState,
+ composedEnhancers
+)
+
+export default store