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 [email protected]
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)
4k Jan 5, 2023
285 Nov 20, 2022
59.1k Jan 9, 2023
1 May 21, 2022
39 Dec 22, 2019
1 Apr 20, 2022
7.9k Dec 30, 2022
57 Dec 29, 2022
602 Dec 21, 2022
27 Sep 15, 2022
157 Dec 29, 2022
42 Dec 27, 2022
12.6k Jan 3, 2023
2.3k Dec 7, 2022
650 Oct 17, 2022
2.2k Nov 20, 2022
3 Apr 22, 2022