sync store state to pouchdb
Switch branches/tags
Nothing to show
Clone or download
Permalink
Failed to load latest commit information.
src extract log and bump 1.0.0-rc.2 Sep 17, 2018
tests
.babelrc Update babel and switch to jest Jun 27, 2018
.editorconfig failing at testing Sep 10, 2015
.gitignore Merge branch 'master' into v1 Jul 14, 2018
README.md
package.json extract log and bump 1.0.0-rc.2 Sep 17, 2018
yarn.lock

README.md

redux-pouchdb

How it is done

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).

Install

yarn add redux-pouchdb@1.0.0-rc.1

Usage

The reducers to be persisted should be augmented by a higher order reducer accordingly to the type of the state.

Reducers in which the state is an object get persisted as a single document by using persistentDocumentReducer

Reducers in which the state is an array get persisted as a collection where each item is a document by using persistentDocumentReducer

Besides that the store should passed to the plain function persistStore

By following this steps your pouchdb database should keep it self in sync with your redux store.

persistentDocumentReducer

The reducers shaped like as object that you wish to persist should be enhanced with this higher order reducer.

import { persistentDocumentReducer } from 'redux-pouchdb';

const counter = (state = {count: 0}, action) => {
  switch(action.type) {
  case INCREMENT:
    return { count: state.count + 1 };
  case DECREMENT:
    return { count: state.count - 1 };
  default:
    return state;
  }
};

const reducerName = 'counter'
const finalReducer = persistentDocumentReducer(db, reducerName)(reducer)

This is how reducer would be persisted like this

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

persistentCollectionReducer

The reducers shaped like as array that you wish to persist should be enhanced with this higher order reducer.

import { persistentCollectionReducer } from 'redux-pouchdb';

const stackCounter = (state = [{ x: 0 }, { x: 1 }, { x: 2 }], action) => {
  switch (action.type) {
    case INCREMENT:
      return state.concat({ x: state.length })
    case DECREMENT:
      return !state.length ? state : state.slice(0, state.length - 1)
    default:
      return state
  }
}

const reducerName = 'stackCounter'
export default persistentCollectionReducer(db, reducerName)(stackCounter)

This is how reducer would be persisted like this

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

persistStore

This plain function holds the store for later usage

import { persistStore } from 'redux-pouchdb';

const db = new PouchDB('dbname');

const store = createStore(reducer, initialState);
persistStore(store)

waitSync

This function receives a reducerName and returns a promise that resolve true if that reducer is synced

let store = createStore(persistedReducer)
persistStore(store)

store.dispatch({
  type: INCREMENT
})

const isSynced = await waitSync(reducerName)