Giter Club home page Giter Club logo

redux-pouchdb's Introduction

redux-pouchdb

What is going on here?

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

Usage

persistentStore

This store enhancer should be composed with yours in order to initialize

import { persistentStore } from 'redux-pouchdb';

const db = new PouchDB('dbname');

//optional
const applyMiddlewares = applyMiddleware(
  thunkMiddleware,
  loggerMiddleware
);

const createStoreWithMiddleware = compose(
  applyMiddlewares,
  persistentStore(db)
)(createStore);

const store = createStoreWithMiddleware(reducer, initialState);

The persistentStore enhancer takes an optional second argument which can be a function or an array of functions which are called whenever changes arrive from the database. These functions are given the document (see the format at the bottom) from PouchDB and any truthy return values will be dispatched to the store. You can use this to set up more complex actions based on new data. If you want to take advantage of any middleware you are also setting up, compose the persistentStore before applyMiddlewares

const changeHandler = doc => {
  // Return thunk based on doc.
};
const createStoreWithMiddleware = compose(
  persistentStore(db, changeHandler),
  applyMiddlewares
)(createStore);
// ...

persistentReducer

The reducers you wish to persist should be enhanced with this higher order reducer.

import { persistentReducer } from 'redux-pouchdb';

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

export default persistentReducer(counter);

NOTE: If you plan on minifying your code, or you want to use a name different from the reducer function name, you can pass a second parameter to persistentReducer.

export default persistentReducer(counter, 'counter');

Caveat

The current behavior is to have a document relative to the reducer that looks like:

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

Notice that if your reducer actually returns an array, and you want your elements to be stored in separate documents of a specific bucket, this is not yet supported.

redux-pouchdb's People

Contributors

vicentedealencar avatar colinbate avatar medihack avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.