npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

redux-pouchdb-per-reducer

v1.0.4

Published

sync store state to pouchdb

Downloads

3

Readme

redux-pouchdb-per-reducer

Repository forked from redux-pouchdb.

This library allows to store the state of each redux reducer in one isolated couchdb document.

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-per-reducer

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)