Added Redux, Router, Thunk & Redux-Router middleware

Author: notrab

README.md

@@ -7,7 +7,12 @@
  },
  "dependencies": {
  "react": "^15.4.2",
- "react-dom": "^15.4.2"
+ "react-dom": "^15.4.2",
+ "react-redux": "^5.0.1",
+ "react-router": "^3.0.0",
+ "react-router-redux": "^4.0.7",
+ "redux": "^3.6.0",
+ "redux-thunk": "^2.1.0"
  },
  "scripts": {
  "start": "react-scripts start",

package.json

@@ -1,21 +1,19 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
+import { Link } from 'react-router'
 
 class App extends Component {
  render() {
  return (
- <div className="App">
- <div className="App-header">
- <img src={logo} className="App-logo" alt="logo" />
- <h2>Welcome to React</h2>
- </div>
- <p className="App-intro">
- To get started, edit <code>src/App.js</code> and save to reload.
- </p>
+ <div>
+ <header>
+ <Link to="/">Home</Link>
+ <Link to="/about-us">About</Link>
+ </header>
+
+ {this.props.children}
  </div>
  );
  }
 }
 
-export default App;
+export default App

src/App.css

@@ -0,0 +1,8 @@
+import React from 'react'
+
+export default () => (
+ <div>
+ <h1>About Us</h1>
+ <p>We are interesting. I promise!</p>
+ </div>
+)

src/App.js

@@ -0,0 +1,21 @@
+import React, { Component } from 'react'
+import { push } from 'react-router-redux'
+import { connect } from 'react-redux'
+
+class Home extends Component {
+ goToAboutPage = () => {
+ this.props.dispatch(push('/about-us'))
+ }
+
+ render() {
+ return (
+ <div>
+ <h1>Home</h1>
+ <p>Welcome home!</p>
+ <button onClick={this.goToAboutPage}>Go to about page via redux</button>
+ </div>
+ )
+ }
+}
+
+export default connect()(Home)

src/App.test.js

@@ -1,9 +1,21 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { render } from 'react-dom';
 import App from './App';
 import './index.css';
+import { Provider } from 'react-redux'
+import { Router, Route, IndexRoute } from 'react-router'
+import store, { history } from './store'
+import Home from './containers/home'
+import About from './containers/about'
 
-ReactDOM.render(
- <App />,
- document.getElementById('root')
-);
+render(
+ <Provider store={store}>
+ <Router history={history}>
+ <Route path="/" component={App}>
+ <IndexRoute component={Home} />
+ <Route path="/about-us" component={About} />
+ </Route>
+ </Router>
+ </Provider>,
+ document.querySelector('#root')
+)