Giter VIP home page Giter VIP logo

redux-remote-persist's Introduction

Redux Remote Persist

Persist and rehydrate a redux store to remote and local storage.

Usage

yarn add redux-persist

  1. Add epic to redux-observable:
import AsyncStorage from '@react-native-community/async-storage';

const remotePersistEpic = createRemotePersistEpic({
  // used internally
  getPersistState: (state) => state.persist,
  remoteStorageFetchAjax: (action$, state$, { ajax }) => ajax({ url: '/fetch' }),
  remoteStorageUpdateAjax: (payload) => (action$, state$, { ajax }) =>
    ajax({ url: '/update', body: payload }),
  handleAjaxError: (action$, errorAction) => (error, source) => of(errorAction(error)),
  localStorageKey: 'myapp',
  persistDebounceTime: 5000,
  // select states which we want to persist
  persistSelectors: {
    'myapp-settings': (state) => state.settings,
    'myapp-storereview': (state) => state.storeReview,
  },
  // select states which we want to rehydrate
  rehydrateSelectors: {
    'myapp-settings': (state) => state.settings,
    'myapp-config': (state) => state.config,
    'myapp-storereview': (state) => state.storeReview,
  },
  storage: AsyncStorage,
});
  1. Integrate reducers:
// configureStore.js

import { remotePersistInternalReducer, remotePersistReducer } from 'redux-remote-persist';

import config from './reducers/config';
import settings from './reducers/settings';
import storeReview from './reducers/storeReview';

// root reducer
const appReducer: any = combineReducers({
  // remote persist reducers
  config: remotePersistReducer({ key: 'myapp-config' }, config), // read-only state
  settings: remotePersistReducer({ key: 'myapp-settings' }, settings),
  // WARNING: use all lower case keys! e.g. 'myapp-storereview' (remote supports only all lowercase)
  storeReview: remotePersistReducer({ key: 'myapp-storereview' }, storeReview),

  // used internally by redux-remote-persist
  persist: remotePersistInternalReducer,
});
  1. (optional) Use actions to hook into redux-remote-persist:
import { actions } from 'redux-remote-persist';

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.