Add react-redux version

package.json

@@ -21,6 +21,8 @@
     "normalize.css": "^4.1.1",
     "react": "^15.1.0",
     "react-dom": "^15.1.0",
+    "react-redux": "^4.4.5",
+    "redux": "^3.5.2",
     "stylishly": "^0.5.0",
     "stylishly-chained": "^0.5.0",
     "stylishly-descendants": "^0.5.0",

src/App.js

@@ -1,4 +1,6 @@
 import React, { Component, PropTypes } from 'react';
+import { Provider } from 'react-redux';
+import { createStore } from './store';
 import { createStyleSheet, createStyleManager } from 'stylishly';
 import { createPluginRegistry } from 'stylishly/lib/pluginRegistry';
 import vendorPrefixer from 'stylishly-vendor-prefixer';
@@ -11,6 +13,8 @@ import mediaQueries from 'stylishly-media-queries';
 
 import Home from './pages/Home';
 
+const store = createStore();
+
 export const styleSheet = createStyleSheet('App', () => {
   return {
     '@raw body': {
@@ -63,6 +67,10 @@ export default class App extends Component {
 
   render() {
     this.styleManager.render(styleSheet);
-    return <Home />;
+    return (
+      <Provider store={store}>
+        <Home />
+      </Provider>
+    );
   }
 }

src/actions.js

@@ -0,0 +1,23 @@
+import {
+  OPEN_APP_DRAWER,
+  CLOSE_APP_DRAWER,
+  TOGGLE_APP_DRAWER
+} from './constants';
+
+export function openDrawer() {
+  return {
+    type: OPEN_APP_DRAWER
+  };
+}
+
+export function closeDrawer() {
+  return {
+    type: CLOSE_APP_DRAWER
+  };
+}
+
+export function toggleDrawer() {
+  return {
+    type: TOGGLE_APP_DRAWER
+  };
+}

src/constants.js

@@ -0,0 +1,6 @@
+/**
+ * Layout
+ */
+export const OPEN_APP_DRAWER = 'OPEN_APP_DRAWER';
+export const CLOSE_APP_DRAWER = 'CLOSE_APP_DRAWER';
+export const TOGGLE_APP_DRAWER = 'TOGGLE_APP_DRAWER';

src/pages/Home.js

@@ -1,5 +1,6 @@
 import React, { Component, PropTypes } from 'react';
 import { createStyleSheet } from 'stylishly';
+import { connect } from 'react-redux';
 
 export const styleSheet = createStyleSheet('Home', () => {
   return {
@@ -18,7 +19,7 @@ export const styleSheet = createStyleSheet('Home', () => {
   };
 });
 
-export default class Home extends Component {
+class Home extends Component {
   static contextTypes = {
     styleManager: PropTypes.object.isRequired
   }
@@ -33,3 +34,11 @@ export default class Home extends Component {
     );
   }
 }
+
+function mapStateToProps(state) {
+  return {
+    drawerOpen: state.app.drawerOpen
+  };
+}
+
+export default connect(mapStateToProps)(Home);

src/reducers/app.js

@@ -0,0 +1,26 @@
+import {
+  OPEN_APP_DRAWER,
+  CLOSE_APP_DRAWER,
+  TOGGLE_APP_DRAWER
+} from '../constants';
+
+const initialState = {
+  drawerOpen: false
+};
+
+export default function update(state = initialState, action) {
+  switch (action.type) {
+
+    case OPEN_APP_DRAWER:
+      return { ...state, drawerOpen: true };
+
+    case CLOSE_APP_DRAWER:
+      return { ...state, drawerOpen: false };
+
+    case TOGGLE_APP_DRAWER:
+      return { ...state, drawerOpen: !state.drawerOpen };
+
+    default:
+      return state;
+  }
+}

src/reducers/index.js

@@ -0,0 +1,8 @@
+import { combineReducers } from 'redux';
+import app from './app';
+
+const rootReducer = combineReducers({
+  app
+});
+
+export default rootReducer;

src/store.js

@@ -0,0 +1,14 @@
+import { createStore as _createStore } from 'redux';
+import rootReducer from './reducers';
+
+export function createStore(initialState) {
+  const store = _createStore(rootReducer, initialState);
+
+  if (module.hot) {
+    module.hot.accept('./reducers', () =>
+      store.replaceReducer(require('./reducers/index'))
+    );
+  }
+
+  return store;
+}