redux-persist-cookie-storage

Redux Persist Cookie Storage Adapter

Redux Persist storage adapter for cookies. Works in the browser and in Node.js with cookie-parser output. This makes it suitable for universal / isomorphic applications.

Installation

npm install --save redux-persist-cookie-storage

Usage

Browser

Pure Cookie mode

import { persistStore, persistCombineReducers } from 'redux-persist'
import { CookieStorage } from 'redux-persist-cookie-storage'
import Cookies from 'cookies-js'

// Cookies.defaults.domain = ...

const persistConfig = {
  key: "root",
  storage: new CookieStorage(Cookies/*, options */)
}

const rootReducer = persistCombineReducers(persistConfig, reducers)

const store = createStore(rootReducer, undefined)

const persistor = persistStore(store, {})

Bootstrap from preloaded state in window object

import { persistStore, persistCombineReducers } from 'redux-persist'
import { CookieStorage } from 'redux-persist-cookie-storage'
import Cookies from 'cookies-js'

const persistConfig = {
  key: "root",
  storage: new CookieStorage(Cookies/*, options */),
  stateReconciler(inboundState, originalState) {
    // Ignore state from cookies, only use preloadedState from window object
    return originalState
  }
}

const rootReducer = persistCombineReducers(persistConfig, reducers)

const store = createStore(rootReducer)

const persistor = persistStore(store, window.PRELOADED_STATE)

Server

// Read-only mode: Use getStoredState method
import { persistStore, getStoredState } from 'redux-persist'
import { CookieStorage, NodeCookiesWrapper } from 'redux-persist-cookie-storage'
import Cookies from 'cookies'

const app = new Express()

app.use(Cookies.express())

app.use(async (req, res) => {
  const cookieJar = new NodeCookiesWrapper(new Cookies(req, res))

  const persistConfig = {
    key: "root",
    storage: new CookieStorage(cookieJar/*, options */),
    stateReconciler(inboundState, originalState) {
      // Ignore state from cookies, only use preloadedState from window object
      return originalState
    }
  }

  let preloadedState
  try {
    preloadedState = await getStoredState(persistConfig)
  }
  catch (e) {
    // getStoredState implementation fails when index storage item is not set.
    preloadedState = {}
  }

  const rootReducer = persistCombineReducers(persistConfig, reducers)

  const store = createStore(rootReducer, preloadedState)
})


// Read-write mode: Create persistor
import { persistStore, getStoredState } from 'redux-persist'
import { CookieStorage, NodeCookiesWrapper } from 'redux-persist-cookie-storage'
import Cookies from 'cookies'

const configurePersistor = async (store) => {
  return new Promise((resolve) => {
    const persistor = persistStore(store, {}, () => {
      resolve(persistor)
    })
  })
}

const app = new Express()

app.use(Cookies.express())

app.use(async (req, res) => {
  const cookieJar = new NodeCookiesWrapper(new Cookies(req, res))

  const persistConfig = {
    key: "root",
    storage: new CookieStorage(cookieJar/*, options */),
    stateReconciler(inboundState, originalState) {
      // Ignore state from cookies, only use preloadedState from window object
      return originalState
    }
  }

  const rootReducer = persistCombineReducers(persistConfig, reducers)

  // Initialize store without preloaded state
  const store = createStore(rootReducer)

  // Wait until persistor has completed deserialization
  const persistor = await configurePersistor(store)

  // Force cookies to be set
  await persistor.flush()

  res.send(200, 'Done!')
})

Options

// By default, session cookies are used
persistStore(store, { storage: new CookieStorage(Cookies) })

// Expiration time can be set via options
persistStore(store, { storage: new CookieStorage(Cookies, {
    expiration: {
      'default': 365 * 86400 // Cookies expire after one year
    }
  })
})

// Default expiration time can be overridden for specific parts of the store:
persistStore(store, { storage: new CookieStorage(Cookies, {
    expiration: {
      'default': null, // Session cookies used by default
      'storeKey': 600 // State in key `storeKey` expires after 10 minutes
    }
  })
})

// Other cookie options like domain, path and secure:
persistStore(store, { storage: new CookieStorage(Cookies, {
    setCookieOptions: {
      path: '/mypath'
    }
  })
})

Development

Running tests

npm test