wup

package.json

@@ -7,13 +7,16 @@
   },
   "dependencies": {
     "fela": "^4.3.5",
+    "mobx-react": "^4.1.8",
     "prop-types": "^15.5.8",
     "react": "^15.5.4",
     "react-dom": "^15.5.4",
     "react-fela": "^4.3.5",
     "react-jss": "^6.1.1",
+    "react-redux": "^5.0.4",
     "react-router": "^4.1.1",
     "react-router-dom": "^4.1.1",
+    "redux": "^3.6.0",
     "styled-components": "^1.4.6"
   },
   "scripts": {

src/components/Router/index.js

@@ -9,6 +9,7 @@ import State from '../../pages/State'
 import Lifecycle from '../../pages/Lifecycle'
 import HigherOrder from '../../pages/HigherOrder'
 import ManipulatingData from '../../pages/ManipulatingData'
+import StateManagement from '../../pages/StateManagement'
 import About from '../../pages/About'
 import Children from '../../pages/Children'
 import Events from '../../pages/Events'
@@ -58,6 +59,9 @@ class Navigation extends React.Component {
             <li className='NavigationItem'>
               <Link to='/About' className='Link'>About us</Link>
             </li>
+            <li className='NavigationItem'>
+              <Link to='/StateManagement' className='Link'>State management</Link>
+            </li>
           </ol>
         </nav>
 
@@ -71,6 +75,7 @@ class Navigation extends React.Component {
         <Route path='/Lifecycle' component={Lifecycle} />
         <Route path='/HigherOrder' component={HigherOrder} />
         <Route path='/ManipulatingData' component={ManipulatingData} />
+        <Route path='/StateManagement' component={StateManagement} />
         <Route path='/Styling' component={Styling} />
         <Route path='/About' component={About} />
       </div>

src/pages/StateManagement/CounterPlain/index.js

@@ -0,0 +1,20 @@
+import React from 'react'
+
+const increment = (state) => ({ count: state.count + 1 })
+const decrement = (state) => ({ count: state.count - 1 })
+
+class CounterPlain extends React.Component {
+  state = { count: 0 }
+
+  render () {
+    return (
+      <div>
+        <div>{this.state.count}</div>
+        <button type='button' onClick={() => this.setState(increment)}>+</button>
+        <button type='button' onClick={() => this.setState(decrement)}>-</button>
+      </div>
+    )
+  }
+}
+
+module.exports = CounterPlain

src/pages/StateManagement/CounterRedux/Counter.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import { connect } from 'react-redux'
+import { incrementCounter, decrementCounter } from './actions'
+
+const Counter = (props) => (
+  <div>
+    <div>{props.count}</div>
+    <button onClick={props.incrementCounter}>+</button>
+    <button onClick={props.decrementCounter}>-</button>
+  </div>
+)
+
+const mapStateToProps = (state) => ({
+  count: state.count
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  incrementCounter: () => dispatch(incrementCounter()),
+  decrementCounter: () => dispatch(decrementCounter())
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(Counter)

src/pages/StateManagement/CounterRedux/actions.js

@@ -0,0 +1,9 @@
+export const incrementCounter = (amount = 1) => ({
+  type: 'INCREMENT',
+  value: amount
+})
+
+export const decrementCounter = (amount = 1) => ({
+  type: 'DECREMENT',
+  value: amount
+})

src/pages/StateManagement/CounterRedux/index.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Provider } from 'react-redux'
+import { createStore } from 'redux'
+import counterReducer from './reducer'
+import Counter from './Counter'
+
+const store = createStore(counterReducer)
+
+const CounterRedux = () => (
+  <Provider store={store}>
+    <Counter />
+  </Provider>
+)
+
+export default CounterRedux

src/pages/StateManagement/CounterRedux/reducer.js

@@ -0,0 +1,12 @@
+const counterReducer = (state = { count: 0 }, action) => {
+  switch (action.type) {
+    case 'INCREMENT':
+      return { count: state.count + 1 }
+    case 'DECREMENT':
+      return { count: state.count - 1 }
+    default:
+      return state
+  }
+}
+
+export default counterReducer

src/pages/StateManagement/index.js

@@ -0,0 +1,54 @@
+import React from 'react'
+import Code from '../../components/Code'
+import PageTitle from '../../components/PageTitle'
+import Example from '../../components/Example'
+import CounterPlain from './CounterPlain'
+import CounterRedux from './CounterRedux'
+
+const Page = (props) => (
+  <div>
+    <PageTitle text='State Management' />
+
+    <p>
+      blah, blah, blah, choose something
+    </p>
+
+    <Code language='jsx'>{`/* CounterPlain/index.js */
+import React from 'react'
+
+const increment = (state) => ({ count: state.count + 1 })
+const decrement = (state) => ({ count: state.count - 1 })
+
+class CounterPlain extends React.Component {
+  state = { count: 0 }
+
+  render () {
+    return (
+      <div>
+        <div>{this.state.count}</div>
+        <button type='button' onClick={() => this.setState(increment)}>+</button>
+        <button type='button' onClick={() => this.setState(decrement)}>-</button>
+      </div>
+    )
+  }
+}
+
+module.exports = CounterPlain`}</Code>
+
+    <Example live>
+      <CounterPlain />
+    </Example>
+
+    <PageTitle text='State management systems' />
+
+    <p>Redux</p>
+
+    <Example live>
+      <CounterRedux />
+    </Example>
+
+    <p>MobX</p>
+  </div>
+)
+
+export default Page