alexlhoffman/redux-offline

Build Offline-First Apps for Web and React Native

Persistent Redux store for Reasonaboutable™️ Offline-First applications, with first-class support for optimistic UI. Use with React, React Native, or as standalone state container for any web app.

Redux Offline is now being maintained by a community driven team. The new versions of the library will now be available under the npm organization @redux-offline. Big thank you to @jevakallio for creating this amazing library in the first place.

Quick start

1. Install with npm (or Yarn)

- npm install --save redux-offline
+ npm install --save @redux-offline/redux-offline

2. Add the offline store enhancer with compose

- import { applyMiddleware, createStore } from 'redux';
+ import { applyMiddleware, createStore, compose } from 'redux';
- import { offline } from 'redux-offline';
+ import { offline } from '@redux-offline/redux-offline';
- import offlineConfig from 'redux-offline/lib/defaults';
+ import offlineConfig from '@redux-offline/redux-offline/lib/defaults';

// ...

const store = createStore(
  reducer,
  preloadedState,
-  applyMiddleware(middleware)
+  compose(
+    applyMiddleware(middleware),
+    offline(offlineConfig)
+  )
);

3. Decorate actions with offline metadata

const followUser = userId => ({
  type: 'FOLLOW_USER_REQUEST',
  payload: { userId },
  meta: {
    offline: {
      // the network action to execute:
      effect: { url: '/api/follow', method: 'POST', body: JSON.stringify({ userId }) },
      // action to dispatch when effect succeeds:
      commit: { type: 'FOLLOW_USER_COMMIT', meta: { userId } },
      // action to dispatch if network action fails permanently:
      rollback: { type: 'FOLLOW_USER_ROLLBACK', meta: { userId } }
    }
  }
});

4. (React Native Android) Ask permission to read network status

If writing a native app for Android, you'll need to make sure to request the permission to access network state in your AndroidManifest.xml:

  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

---

See Documentation for configuration options, the full API, and common recipes.

Contributing

Improvements and additions welcome. For large changes, please submit a discussion issue before jumping to coding; we'd hate you to waste the effort.

If you are reporting a bug, please include code that reproduces the error. Here is a starting application on CodeSandbox.

In lieu of a formal style guide, follow the included eslint rules, and use Prettier to format your code.

Miscellanea

Prior art

Redux Offline is a distillation of patterns discovered while building apps using previously existing libraries:

• Forbes Lindesay's redux-optimist
• Zack Story's redux-persist

Without their work, Redux Offline wouldn't exist. If you like the ideas behind Redux Offline, but want to build your own stack from lower-level components, these are good places to start.

License

MIT