Extra middlewares and store enhancers for redux store

CHANGELOG.md

@@ -4,6 +4,8 @@ renamed accordingly.
 ``defaultLayout``
 - Changed: ``redux`` as been upgraded to v4.x.
 ([#91](https://github.com/MoOx/statinamic/pull/91))
+- Added: Allow to pass extra middlewares and store enhancers to redux store
+([#102](https://github.com/MoOx/statinamic/pull/102))
 - Added: Option to add static assets such as images, video
 ([#94](https://github.com/MoOx/statinamic/pull/94))
 - Added: ``statinamic`` section in ``package.json`` can be used to define core

docs/content/docs/advanced/redux.md

@@ -63,3 +63,62 @@ if (module.hot) {
 
 export default store
 ```
+## Adding custom middlewares and store enhancers to Redux store
+
+`statinamic/lib/redux/createStore` accepts two extra parameters that
+allow you to pass custom middlewares and store enhancers
+
+Here is an example of adding
+[redux-logger](https://github.com/fcomb/redux-logger) and
+[redux-search](https://github.com/treasure-data/redux-search)
+to Redux store
+
+```js
+import { combineReducers } from "redux"
+import createStore from "statinamic/lib/redux/createStore"
+import * as statinamicReducers from "statinamic/lib/redux/modules"
+import minifyCollection from "statinamic/lib/md-collection-loader/minify"
+import { reducer as searchReducer, reduxSearch } from "redux-search"
+import createLogger from "redux-logger"
+
+import * as layouts from "layouts"
+
+const extraMiddlewares = { createLogger() }
+const extraStoreEnhancers = {
+  reduxSearch({
+    resourceIndexes: {
+      books: ['author', 'title']
+    },
+    resourceSelector: (resourceName, state) => {
+      return state.resources.get(resourceName)
+    }
+  })
+}
+
+const store = createStore(
+  combineReducers({
+    ...statinamicReducers,
+    ...{
+      search: searchReducer
+    }
+  }),
+
+  // initialState
+  {
+    ...(typeof window !== "undefined") && window.__INITIAL_STATE__,
+
+    // static build optimization
+    ...__PROD__ && {
+      collection:
+        minifyCollection(require("statinamic/lib/md-collection-loader/cache")),
+    },
+
+    layouts,
+  },
+  extraMiddlewares,
+  extraStoreEnhancers,
+
+)
+
+export default store
+```

src/redux/createStore/index.js

@@ -1,7 +1,12 @@
 import { createStore, applyMiddleware, compose } from "redux"
 import thunk from "redux-thunk"
 
-export default function(reducer = {}, initialState = {}) {
+export default function(
+  reducer = {},
+  initialState = {},
+  extraMiddlewares = {},
+  extraStoreEnhancers = {}
+) {
   function promiseMiddleware() {
     return (next) => (action) => {
       const { promise, types, ...rest } = action
@@ -35,13 +40,25 @@ export default function(reducer = {}, initialState = {}) {
     }
 
     finalCreateStore = compose(
-      applyMiddleware(promiseMiddleware, thunk),
+      applyMiddleware(
+        promiseMiddleware,
+        thunk,
+        ...extraMiddlewares
+      ),
       devTools(),
-      persistState(getDebugSessionKey())
+      persistState(getDebugSessionKey()),
+      ...extraStoreEnhancers
     )(createStore)
   }
   else {
-    finalCreateStore = applyMiddleware(promiseMiddleware, thunk)(createStore)
+    finalCreateStore = compose(
+      applyMiddleware(
+        promiseMiddleware,
+        thunk,
+        ...extraMiddlewares
+      ),
+      ...extraStoreEnhancers
+    )(createStore)
   }
 
   return finalCreateStore(reducer, initialState)