@abhinavzspace/redux-pouchdb 中文文档教程

Question

redux-pouchdb

What is going on here?

这很简单：

• 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

应该和你的一起组成，以便初始化

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

这个存储增强器 数据库。 这些函数从 PouchDB 获得文档（请参阅底部的格式），任何真实的返回值将被分派到商店。 您可以使用它来根据新数据设置更复杂的操作。 如果您想利用您同时设置的任何中间件，请在 applyMiddlewares 之前编写 persistentStore

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

persistentReducer

您希望保留的 reducer 应该使用这个高阶 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);

注意：如果您计划缩小代码，或者您想要使用不同于 reducer 函数名称的名称，您可以将第二个参数传递给 persistentReducer。

export default persistentReducer(counter, 'counter');

Caveat

当前的行为是拥有一个与 reducer 相关的文档，如下所示：

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

请注意，如果您的 reducer 实际上返回一个数组，并且您希望将您的元素存储在特定存储桶的单独文档中，则目前尚不支持。