add a basic example

Author: jlongster

README.md

@@ -51,6 +51,12 @@ This only depends on the `history.listen` function from react-router
 and the `store.getState` and `store.subscribe` functions from redux.
 It should be very future-proof with any versions of either libraries.
 
+## Examples
+
+There are examples in the `examples` directory:
+
+1. [basic](https://github.com/jlongster/redux-simple-router/blob/master/examples/basic)
+
 ## How to Use
 
 The idea of this library is to use react-router's functionality exactly

examples/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

examples/basic/README.md

@@ -0,0 +1,10 @@
+This is a basic example that demonstrates rendering components based
+on URLs with react-router as well as connecting them to Redux state.
+It uses both <Link> elements and the `updatePath` action creator to
+update the paths.
+
+To run, follow these steps:
+
+1. Install dependencies with `npm install` (make sure it creates a local node_modules)
+2. Build with `webpack --watch`
+3. Open `index.html`

examples/basic/actions/count.js

@@ -0,0 +1,17 @@
+const constants = require('../constants');
+
+function increase(n) {
+  return {
+    type: constants.INCREASE,
+    amount: n
+  };
+}
+
+function decrease(n) {
+  return {
+    type: constants.DECREASE,
+    amount: n
+  };
+}
+
+module.exports = { increase, decrease };

examples/basic/app.js

@@ -0,0 +1,31 @@
+const React = require('react');
+const ReactDOM = require('react-dom');
+const { createStore, combineReducers } = require('redux');
+const { Provider } = require('react-redux');
+const { Router, Route, IndexRoute } = require('react-router');
+const createHistory = require('history/lib/createHashHistory');
+const { syncReduxAndRouter, routeReducer } = require('redux-simple-router');
+
+const reducers = require('./reducers');
+const { App, Home, Foo, Bar } = require('./components');
+
+const reducer = combineReducers(Object.assign({}, reducers, {
+  routing: routeReducer
+}));
+const store = createStore(reducer);
+const history = createHistory();
+
+syncReduxAndRouter(history, store);
+
+ReactDOM.render(
+  <Provider store={store}>
+    <Router history={history}>
+      <Route path="/" component={App}>
+        <IndexRoute component={Home}/>
+        <Route path="foo" component={Foo}/>
+        <Route path="bar" component={Bar}/>
+      </Route>
+    </Router>
+  </Provider>,
+  document.getElementById('mount')
+);

examples/basic/components/App.js

@@ -0,0 +1,29 @@
+const React = require('react');
+const { Link } = require('react-router');
+const { connect } = require('react-redux');
+const { updatePath } = require('redux-simple-router');
+
+function App({ updatePath, children }) {
+  return (
+    <div>
+      <header>
+        Links:
+        {' '}
+        <Link to="/">Home</Link>
+        {' '}
+        <Link to="/foo">Foo</Link>
+        {' '}
+        <Link to="/bar">Bar</Link>
+      </header>
+      <div>
+        <button onClick={() => updatePath('/foo')}>Go to /foo</button>
+      </div>
+      <div style={{marginTop: '1.5em'}}>{children}</div>
+    </div>
+  );
+};
+
+module.exports = connect(
+  null,
+  { updatePath }
+)(App);

examples/basic/components/Bar.js

@@ -0,0 +1,5 @@
+const React = require('react');
+
+module.exports = function Bar() {
+  return <div>And I am Bar!</div>;
+}

examples/basic/components/Foo.js

@@ -0,0 +1,5 @@
+const React = require('react');
+
+module.exports = function Foo() {
+  return <div>I am Foo!</div>;
+}

examples/basic/components/Home.js

@@ -0,0 +1,19 @@
+const React = require('react');
+const { connect } = require('react-redux');
+const { increase, decrease } = require('../actions/count');
+
+function Home({ number, increase, decrease }) {
+  return (
+    <div>
+      Some state changes:
+      {number}
+      <button onClick={() => increase(1)}>Increase</button>
+      <button onClick={() => decrease(1)}>Decrease</button>
+    </div>
+  );
+};
+
+module.exports = connect(
+  state => ({ number: state.count.number }),
+  { increase, decrease }
+)(Home);

examples/basic/components/index.js

@@ -0,0 +1,6 @@
+const App = require('./App');
+const Home = require('./Home');
+const Foo = require('./Foo');
+const Bar = require('./Bar');
+
+module.exports = { App, Home, Foo, Bar };

examples/basic/constants.js

@@ -0,0 +1,5 @@
+
+module.exports = {
+  INCREASE: 'INCREASE',
+  DECREASE: 'DECREASE'
+}

examples/basic/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>redux-simple-router basic example</title>
+    <meta charset="utf8"/>
+  </head>
+  <body>
+    <div id="mount"></div>
+    <script src="dist/bundle.js"></script>
+  </body>
+</html>

examples/basic/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "rsr-basic-example",
+  "version": "0.0.0",
+  "dependencies": {
+    "history": "^1.13.1",
+    "react": "^0.14.2",
+    "react-dom": "^0.14.2",
+    "react-redux": "^4.0.0",
+    "react-router": "^1.0.0",
+    "redux": "^3.0.4",
+    "redux-simple-router": "0.0.8"
+  },
+  "devDependencies": {
+    "babel-core": "^6.1.21",
+    "babel-loader": "^6.2.0",
+    "babel-preset-es2015": "^6.1.18",
+    "babel-preset-react": "^6.1.18",
+    "webpack": "^1.12.6"
+  }
+}

examples/basic/reducers/count.js

@@ -0,0 +1,17 @@
+const constants = require('../constants');
+
+const initialState = {
+  number: 1
+}
+
+function update(state = initialState, action) {
+  if(action.type === constants.INCREASE) {
+    return { number: state.number + action.amount };
+  }
+  else if(action.type === constants.DECREASE) {
+    return { number: state.number - action.amount };
+  }
+  return state;
+}
+
+module.exports = update;

examples/basic/reducers/index.js

@@ -0,0 +1,3 @@
+const count = require('./count');
+
+module.exports = { count };

examples/basic/webpack.config.js

@@ -0,0 +1,29 @@
+const path = require('path');
+
+module.exports = {
+  entry: './app.js',
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js'
+  },
+  module: {
+    loaders: [{
+      test: /\.js$/,
+      loaders: ['babel?presets[]=react,presets[]=es2015'],
+      exclude: /node_modules/,
+      include: __dirname
+    }]
+  }
+}
+
+
+
+// This will make the redux-simpler-router module resolve to the
+// latest src instead of using it from npm. Remove this if running
+// outside of the source.
+var src = path.join(__dirname, '..', '..', 'src')
+var fs = require('fs')
+if (fs.existsSync(src)) {
+  // Use the latest src
+  module.exports.resolve = { alias: { 'redux-simple-router': src } }
+}