Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vicentedealencar/redux-pouchdb
sync store state to pouchdb
https://github.com/vicentedealencar/redux-pouchdb
Last synced: 4 months ago
JSON representation
sync store state to pouchdb
- Host: GitHub
- URL: https://github.com/vicentedealencar/redux-pouchdb
- Owner: vicentedealencar
- Created: 2015-08-13T03:16:34.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T21:41:24.000Z (almost 2 years ago)
- Last Synced: 2024-07-20T04:16:24.035Z (5 months ago)
- Language: JavaScript
- Size: 511 KB
- Stars: 223
- Watchers: 8
- Forks: 18
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# redux-pouchdb
## How it is done
It is very simple:
- The [PouchDB](http://pouchdb.com/) database persists the state of chosen parts of the [Redux](https://redux.js.org) 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.
``` js
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
``` js
{
_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.
``` js
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
``` js
{
_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
``` js
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
``` js
let store = createStore(persistedReducer)
persistStore(store)
store.dispatch({
type: INCREMENT
})
const isSynced = await waitSync(reducerName)
```