Sync store state to pouchdb

Usage no npm install needed!

<script type="module">
  import abhinavzspaceReduxPouchdb from 'https://cdn.skypack.dev/@abhinavzspace/redux-pouchdb';



What is going on here?

It is very simple:

  • The PouchDB database persists the state of chosen parts of the Redux store every time it changes.
  • Your reducers will be passed the state from PouchDB when your app loads and every time a change arrives (if you are syncing with a remote db).



This store enhancer should be composed with yours in order to initialize

import { persistentStore } from 'redux-pouchdb';

const db = new PouchDB('dbname');

const applyMiddlewares = applyMiddleware(

const createStoreWithMiddleware = compose(

const store = createStoreWithMiddleware(reducer, initialState);

The persistentStore enhancer takes an optional second argument which can be a function or an array of functions which are called whenever changes arrive from the database. These functions are given the document (see the format at the bottom) from PouchDB and any truthy return values will be dispatched to the store. You can use this to set up more complex actions based on new data. If you want to take advantage of any middleware you are also setting up, compose the persistentStore before applyMiddlewares

const changeHandler = doc => {
  // Return thunk based on doc.
const createStoreWithMiddleware = compose(
  persistentStore(db, changeHandler),
// ...


The reducers you wish to persist should be enhanced with this higher order reducer.

import { persistentReducer } from 'redux-pouchdb';

const counter = (state = {count: 0}, action) => {
  switch(action.type) {
  console.log(state.count + 1);
    return { count: state.count + 1 };
    return { count: state.count - 1 };
    return state;

export default persistentReducer(counter);

NOTE: If you plan on minifying your code, or you want to use a name different from the reducer function name, you can pass a second parameter to persistentReducer.

export default persistentReducer(counter, 'counter');


The current behavior is to have a document relative to the reducer that looks like:

  _id: 'reducerName', // the name of the reducer function
  state: {}|[], // the state of the reducer
  _rev: '' // pouchdb keeps track of the revisions

Notice that if your reducer actually returns an array, and you want your elements to be stored in separate documents of a specific bucket, this is not yet supported.