Merge pull request #14 from ganarajpr/master

LocalProvider to solve the issue of Global vs Local changes

Author: slorber

localprovider-redux-saga-ganaraj/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015", "stage-0", "react"]
+}

localprovider-redux-saga-ganaraj/.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+build/

localprovider-redux-saga-ganaraj/README.md

@@ -0,0 +1,44 @@
+# Scalable Frontend With Redux and Sagas
+
+This project is an attempt to address the problem raised at
+[slorber/scalable-frontend-with-elm-or-redux](https://github.com/slorber/scalable-frontend-with-elm-or-redux)
+by [@sebastienlorber](https://twitter.com/sebastienlorber).
+
+**Note:** The overall application and some code ( Components ) were copied over from 
+Jaysoo's implementation - but the architecture is completely different between 
+the two implementations.
+
+## Notable Differences
+
+One of the things I had to invent to make this architecture happen is the **LocalProvider**.
+This is a Provider higher order component that provides the store to all its children 
+through the context. In this respect its quite similiar to the *Original* Redux Provider.
+The important difference is that it allows you to have *local* state maintained in a
+Redux store. There are multiple stores ( kind of a store hierarchy! ) but all dispatched
+actions are *listenable* at the global store. This allows local isolated modifications
+while also allowing *global* signalling mechanism. It works exactly
+the same as using *setState* but with the added benefit of being able to move any component
+from a local state to a global state with very few changes.  
+
+## Downsides
+
+- The complete application state is not *currently* serializable ( atleast completely! ).
+- Its not possible to react to *local* changes in other *local* locations.
+
+## Running App
+
+```
+npm install
+npm start
+```
+
+Browse to [http://localhost:8080](http://localhost:8080), and see the
+"Real World" Example at the very bottom of the page.
+
+- The GIFs section allows you to add a GIF for the entered topic.
+- The toggle button can be *on* or *off*.
+- The counter can be *incremented* or *decremented*.
+- Whenever a new GIF is fetched (either by adding or requesting more),
+  the counter is incremented by *1* if button is off or `counter < 10`,
+  otherwise it is incremented by *2*.
+

localprovider-redux-saga-ganaraj/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "scalable-frontend-with-redux-saga-localstate-ganaraj",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "build": "node_modules/.bin/webpack",
+    "start": "node_modules/.bin/webpack-dev-server",
+    "test": "node_modules/.bin/mocha --require babel-core/register --recursive src/**/__tests__/**/*-test.js"
+  },
+  "author": "Ganaraj P R <[email protected]> (http://www.dhi.io/)",
+  "license": "ISC",
+  "devDependencies": {
+    "babel-core": "^6.6.4",
+    "babel-loader": "^6.2.4",
+    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-react": "^6.5.0",
+    "babel-preset-stage-0": "^6.5.0",
+    "css-loader": "^0.23.1",
+    "expect": "^1.14.0",
+    "mocha": "^2.4.5",
+    "react-hot-loader": "^1.3.0",
+    "redux-logger": "^2.6.1",
+    "style-loader": "^0.13.0",
+    "superagent": "^1.8.0",
+    "webpack": "^1.12.14",
+    "webpack-dev-server": "^1.14.1"
+  },
+  "dependencies": {
+    "babel-polyfill": "^6.6.1",
+    "react": "^0.14.7",
+    "react-dom": "^0.14.7",
+    "react-redux": "^4.4.0",
+    "redux": "^3.3.1",
+    "redux-saga": "^0.9.3"
+  }
+}

localprovider-redux-saga-ganaraj/src/LocalProvider.js

@@ -0,0 +1,46 @@
+import React, {createElement, Component} from 'react';
+import Provider from 'react-redux';
+import { createStore, applyMiddleware } from 'redux';
+
+const localState = (component, localReducer, mws=[]) => {
+  
+  class LocalProvider extends Component {
+    constructor(props, context) {
+        super(props, context);
+        this.parentStore = context.store;
+        this.listener = this.listener.bind(this);
+        this.localStore = createStore(localReducer, 
+            applyMiddleware.apply(null, [this.listener, ...mws]));
+        this.overrideGetState();        
+    }
+
+    overrideGetState(){
+        const localGetState = this.localStore.getState;
+        this.localStore.getState = () => ({
+                ...this.parentStore.getState(),
+                local: localGetState()
+            });
+    }
+    
+    getChildContext() {
+        return { store: this.localStore };
+    }
+    
+    listener() {
+        return (next) => (action) => {
+            let returnValue = next(action);
+            this.parentStore.dispatch(action);
+            return returnValue;
+        };
+    };
+    
+    render() {
+        return createElement(component, this.props);       
+    }
+  }  
+  LocalProvider.contextTypes = {store: React.PropTypes.object};
+  LocalProvider.childContextTypes = {store: React.PropTypes.object};
+  return LocalProvider;
+};
+
+export default localState;

localprovider-redux-saga-ganaraj/src/counter/Container.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import * as actions from './actions';
+
+export const Counter = ({ count, increment, decrement }) => (
+  <div>
+    <button style={{ width: '50px' }} onClick={() => increment()}>
+      +
+    </button>
+    <span style={{ paddingLeft: '50px', paddingRight: '50px' }}>
+      {count}
+    </span>
+    <button style={{ width: '50px' }} onClick={() => decrement()}>
+      -
+    </button>
+  </div>
+)
+
+function mapStateToProps(state, ownProps) {
+  return {
+    count: state.counter
+  }
+}
+
+function mapDispatchToProps(dispatch, ownProps) {
+  return {
+    increment: () => dispatch(actions.increment()),
+    decrement: () => dispatch(actions.decrement())
+  };
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Counter);

localprovider-redux-saga-ganaraj/src/counter/actions.js

@@ -0,0 +1,14 @@
+export const INCREMENT = 'INCREMENT';
+export const DECREMENT = 'DECREMENT';
+
+export const increment = () => {
+  return {
+    type: INCREMENT
+  }
+}
+
+export const decrement = () => {
+  return {
+    type: DECREMENT
+  }
+}

localprovider-redux-saga-ganaraj/src/counter/index.js

@@ -0,0 +1,5 @@
+import * as actions from './actions';
+import reducer from './reducer';
+import Container from './Container';
+
+export { actions, reducer, Container };

localprovider-redux-saga-ganaraj/src/counter/reducer.js

@@ -0,0 +1,14 @@
+import { INCREMENT, DECREMENT } from './actions';
+
+const initialState = 0;
+
+export default (state = initialState, action) => {
+  switch (action.type) {
+    case INCREMENT:
+      return state+1;
+    case DECREMENT:
+    return state-1;
+    default:
+      return state;
+  }
+}

localprovider-redux-saga-ganaraj/src/index.js

@@ -0,0 +1,25 @@
+import './styles.css'
+import 'babel-polyfill'
+import React from 'react'
+import { render } from 'react-dom'
+import { Provider } from 'react-redux'
+import { App, reducer } from './main'
+import { createStore, applyMiddleware } from 'redux'
+import createSagaMiddleware from 'redux-saga';
+import createLogger from 'redux-logger';
+import saga from './saga';
+
+const logger = createLogger();
+const sagaMiddleware = createSagaMiddleware(saga)
+
+const store = createStore(reducer, 
+    applyMiddleware(sagaMiddleware, logger)
+    );
+
+render(
+  <Provider store={store}>
+    <App/>
+  </Provider>
+  ,
+  document.getElementById('app')
+)