tazsingh · January 25, 2016 04:02 · Jan 25, 2016
diff --git a/main.js b/main.js
@@ -0,0 +1,33 @@
+import {createStore, applyMiddleware, combineReducers} from "redux";
+import thunk from "redux-thunk";
+
+import {setupIncrementalReduxReducers, reducerStore} from "incremental-redux-reducers";
+
+// Create the store however you like.
+// For example purposes, let's apply the thunk middleware.
+const createStoreWithMiddleware = applyMiddleware(
+  thunk
+)(createStore);
+
+// And then let's create the rootStore with a noop reducer.
+const rootStore = createStoreWithMiddleware(() => {});
+
+// This will add hooks to that rootStore that the lib will tap into.
+setupIncrementalReduxReducers(rootStore);
+
+// Alternatively, you can subscribe to the reducerStore and setup the rootStore as you like.
+// As Dan Abramov mentioned, if you want to use Immutable everywhere or set up rootStore by hand, you can do that too.
+// (Note this is an example, you probably wouldn't do this and the above line in a real app.)
+reducerStore.subscribe(() => {
+  const reducerMapping = reducerStore.getState();
+
+  // Do what you please with reducerMapping.
+
+  // This is what setupIncrementalReduxReducers is doing behind the scenes.
+  rootStore.replaceReducer(combineReducers(reducerMapping));
+});
+
+// Dan mentioned that storing the reducers in a Redux store and using Redux actions to communicate with it
+// can be removed. I tried to conceptualize that but found myself implementing global state and communicating with it.
+// Redux is my preferred way to communicate with global state. But happy to field recommendations that maintain
+// enough flexibility for library consumers to do what they want (i.e. what I've demo'd with the subscribe hook here)!
diff --git a/usersComponent.js b/usersComponent.js
@@ -0,0 +1,23 @@
+// Note this import is important to tell our bundler that this reducer is required by this component.
+// That's how Webpack (for example) knows what to bundle for each chunk in our application.
+// If multiple chunks require the same reducer, Webpack can then put it in a common chunk.
+import usersReducer from "./usersReducer";
+
+import {mapReducersToProps} from "incremental-redux-reducers";
+
+import {connect} from "react-redux";
+
+// I've employed this mapReducersToProps function to make it easier to map the reducer function to the state tree
+// since you've already had to require the reducer function here. May as well use its tagged name value!
+@connect(mapReducersToProps({
+  localUsers: usersReducer
+}))
+// Note that this is equivalent to writing:
+// @connect((state) => {
+//   return {
+//     localUsers: state.users
+//   }
+// })
+export default ({localUsers}) => {
+  // The usual component logic with your localUsers prop.
+}
diff --git a/usersReducer.js b/usersReducer.js
@@ -0,0 +1,12 @@
+import {addReducer} from "incremental-redux-reducers";
+
+// addReducer will tell our reducerStore to assign the reducer function to the "users" key.
+// Behind the scenes, this will dispatch a redux action as that's what the store responds to.
+// addReducer will return the reducer function that's tagged with the name we assigned it.
+export default addReducer("users", (state = [], action) => {
+  switch(action.type) {
+    // your usual reducer logic
+    default:
+      return state;
+  }
+});
No results found