Merge pull request #1289 from rackt/counter-vanilla

gaearon · gaearon · commit 970d08708566 · 2016-01-27T03:39:48.000Z
Add counter-vanilla example
diff --git a/docs/introduction/Examples.md b/docs/introduction/Examples.md
@@ -5,6 +5,19 @@ Redux is distributed with a few examples in its [source code](https://github.com
 >##### Note on Copying
 >If you copy Redux examples outside their folders, you can delete some lines at the end of their `webpack.config.js` files. They follow a “You can safely delete these lines in your project.” comment.
 
+## Counter Vanilla
+
+Run the [Counter Vanilla](https://github.com/rackt/redux/tree/master/examples/counter-vanilla) example:
+
+```
+git clone https://github.com/rackt/redux.git
+
+cd redux/examples/counter-vanilla
+open index.html
+```
+
+It does not require a build system or a view framework and exists to show the raw Redux API used with ES5.
+
 ## Counter
 
 Run the [Counter](https://github.com/rackt/redux/tree/master/examples/counter) example:
diff --git a/examples/counter-vanilla/index.html b/examples/counter-vanilla/index.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Redux basic example</title>
+    <script src="https://npmcdn.com/redux@latest/dist/redux.min.js"></script>
+  </head>
+  <body>
+    <div>
+      <p>
+        Clicked: <span id="value">0</span> times
+        <button id="increment">+</button>
+        <button id="decrement">-</button>
+        <button id="incrementIfOdd">Increment if odd</button>
+        <button id="incrementAsync">Increment async</button>
+      </p>
+    </div>
+    <script>
+      function counter(state, action) {
+        if (typeof state === 'undefined') {
+          return 0
+        }
+
+        switch (action.type) {
+          case 'INCREMENT':
+            return state + 1
+          case 'DECREMENT':
+            return state - 1
+          default:
+            return state
+        }
+      }
+
+      var store = Redux.createStore(counter)
+      var valueEl = document.getElementById('value')
+
+      function render() {
+        valueEl.innerHTML = store.getState().toString()
+      }
+
+      render()
+      store.subscribe(render)
+
+      document.getElementById('increment')
+        .addEventListener('click', function () {
+          store.dispatch({ type: 'INCREMENT' })
+        })
+
+      document.getElementById('decrement')
+        .addEventListener('click', function () {
+          store.dispatch({ type: 'DECREMENT' })
+        })
+
+      document.getElementById('incrementIfOdd')
+        .addEventListener('click', function () {
+          if (store.getState() % 2 === 1) {
+            store.dispatch({ type: 'INCREMENT' })
+          }
+        })
+
+      document.getElementById('incrementAsync')
+        .addEventListener('click', function () {
+          setTimeout(function () {
+            store.dispatch({ type: 'INCREMENT' })
+          }, 1000)
+        })
+    </script>
+  </body>
+</html>
