Redux Middleware for syncing state and a PouchDB database.
Propagates changes made to a state into PouchDB. Propagates changes made to PouchDB into the state.
$ npm install pouch-redux-middleware --save
pouch-redux-middleware will automatically populate a part of the store, specified by path
, with the documents using the specified actions. This "sub-state" will be a list of the documents straight out of the database. When the database is modified by a 3rd party (e.g. by replication) a Redux action will be dispatched to update the "sub-state". Conversely, if you alter a document within the "sub-state", then the document will be updated in the database.
- If a new document is created in the database (e.g. by replication or directly using
db.post
), then the correspondinginsert
action will be dispatched. If a document is updated in the database (e.g. by replication or directly), then the correspondingupdate
action will be dispatched. If a document is deleted in the database (e.g. by replication or directly), then the correspondingremove
action will be dispatched. - If you add a document to the "sub-state", then the document will be added to the database automatically (you should specify keys such as
_id
). If you alter a document in the "sub-state", the document will be updated in the database automatically. If you remove a document from the "sub-state", the document will be removed from the database automatically. - You may specify that that only a subset of the database's documents should populate the store by using
changeFilter
which effectively filters the documents under consideration.
Example of configuring a store:
import * as types from '../constants/ActionTypes'
import PouchMiddleware from 'pouch-redux-middleware'
import { createStore, applyMiddleware } from 'redux'
import rootReducer from '../reducers'
import PouchDB from 'pouchdb'
export default function configureStore() {
const db = new PouchDB('todos');
const pouchMiddleware = PouchMiddleware({
path: '/todos',
db,
actions: {
remove: doc => { return { type: types.DELETE_TODO, id: doc._id } },
insert: doc => { return { type: types.INSERT_TODO, todo: doc } },
batchInsert: docs => { return { type: types.BATCH_INSERT_TODOS, todos: docs } }
update: doc => { return { type: types.UPDATE_TODO, todo: doc } },
}
})
const store = createStore(
rootReducer,
undefined,
applyMiddleware(pouchMiddleware)
)
return store
}
paths
: path or array containing path specs
A path spec is an object describing the behaviour of a sub-tree of the state it has the following attributes:
path
: a JsonPath path where the documents will stored in the state as an arraydb
: a PouchDB databaseactions
: an object describing the actions to perform when initially inserting items and when a change occurs in the db. It's an object with keys containing a function that returns an action for each of the events (remove
,insert
,batchInsert
andupdate
)changeFilter
: a filtering function that receives a changed document, and if it returns false, the document will be ignored for the path. This is useful when you have multiple paths in a single database that are differentiated through an attribute (liketype
).handleResponse
a function that is invoked with the direct response of the database, which is useful when metadata is needed or errors need custom handling. Arguments areerror, data, callback
.callback
must be invoked with a potential error after custom handling is done.initialBatchDispatched
a function that is invoked once the initial set of data has been read from pouchdb and dispatched to the redux store. This comes handy if you want skip the initial updates to a store subscriber by delaying the subscription to the redux store until the initial state is present. For example, when your application is first loaded you may wish to delay rendering until the store is updated.
Example of a path spec:
{
path: '/todos',
db,
actions: {
remove: doc => { return { type: types.DELETE_TODO, id: doc._id } },
insert: doc => { return { type: types.INSERT_TODO, todo: doc } },
batchInsert: docs => { return { type: types.BATCH_INSERT_TODOS, todos: docs } }
update: doc => { return { type: types.UPDATE_TODO, todo: doc } },
}
}
ISC