persist ui reducer

Author: Balthazar Gronon

package.json

@@ -27,6 +27,7 @@
     "react-redux": "^5.0.5",
     "redux": "^3.7.1",
     "redux-actions": "^2.0.3",
+    "redux-thunk": "^2.2.0",
     "serialize-javascript": "^1.3.0",
     "styled-components": "^2.2.4"
   },

src/actions/ui.js

@@ -20,7 +20,15 @@
 
 import { createAction } from 'redux-actions'
 
+import { setStorage } from 'store'
+
 export const selectTab = createAction('SELECT_TAB')
 export const selectItem = createAction('SELECT_ITEM')
 export const goto = createAction('GOTO')
-export const toggleActive = createAction('TOGGLE_ACTIVE')
+
+export const toggleActive = () => (dispatch, getState) => {
+  dispatch({ type: 'TOGGLE_ACTIVE' })
+
+  const { ui } = getState()
+  setStorage({ ui })
+}

src/reducers/ui.js

@@ -58,5 +58,5 @@ export default handleActions(
 
     RESET: () => initialState,
   },
-  initialState
+  initialState,
 )

src/store.js

@@ -18,31 +18,28 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import { createStore, compose } from 'redux'
+import { createStore, applyMiddleware, compose } from 'redux'
 import serialize from 'serialize-javascript'
+import thunk from 'redux-thunk'
 import has from 'lodash/has'
 
 import reducer from 'reducers'
 
-const devTools = (process.env.__BROWSER__ && window.devToolsExtension)
-  ? window.devToolsExtension()
-  : f => f
+const devTools =
+  process.env.__BROWSER__ && window.devToolsExtension ? window.devToolsExtension() : f => f
 
 const hasChromeStorage = has(window, 'chrome.storage.sync.get')
 
-export const getStorage = cb => hasChromeStorage
-  ? chrome.storage.sync.get(cb)
-  : cb(JSON.parse(localStorage.getItem('state')))
+export const getStorage = cb =>
+  hasChromeStorage ? chrome.storage.sync.get(cb) : cb(JSON.parse(localStorage.getItem('state')))
 
-export const setStorage = (data, cb) => hasChromeStorage
-  ? chrome.storage.sync.set(data, cb)
-  : cb(localStorage.setItem('state', serialize(data)))
+export const setStorage = (data, cb = f => f) =>
+  hasChromeStorage
+    ? chrome.storage.sync.set(data, cb)
+    : cb(localStorage.setItem('state', serialize(data)))
 
 export default cb => {
-
-  const enhancers = compose(
-    devTools,
-  )
+  const enhancers = compose(applyMiddleware(thunk), devTools)
 
   getStorage(initialState => {
     const store = createStore(reducer, initialState || {}, enhancers)
@@ -55,5 +52,4 @@ export default cb => {
 
     cb(store)
   })
-
 }

yarn.lock

@@ -5464,6 +5464,10 @@ redux-actions@^2.0.3:
     lodash-es "^4.17.4"
     reduce-reducers "^0.1.0"
 
+redux-thunk@^2.2.0:
+  version "2.2.0"
+  resolved "https://unpm.uberinternal.com/redux-thunk/-/redux-thunk-2.2.0.tgz#e615a16e16b47a19a515766133d1e3e99b7852e5"
+
 redux@^3.7.1:
   version "3.7.1"
   resolved "https://registry.yarnpkg.com/redux/-/redux-3.7.1.tgz#bfc535c757d3849562ead0af18ac52122cd7268e"