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.
Yarn)1. Install with npm (or
npm install --save @redux-offline/redux-offline
2. Add the
offline store enhancer with
;;;// ...const store =;
3. Decorate actions with offline metadata
const followUser =type: 'FOLLOW_USER_REQUEST'payload: userIdmeta:offline:// the network action to execute:effect: url: '/api/follow' method: 'POST' json: 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;
If the effect payload is something other than JSON you can pass the body and headers:
const followUser =type: 'REGISTER_USER'payload: name emailmeta:offline:// the network action to execute:effect: url: '/api/register' method: 'POST' body: `name=&email=` headers: 'content-type': 'application/x-www-form-urlencoded'// action to dispatch when effect succeeds:commit: type: 'REGISTER_USER_COMMIT' meta: name email// action to dispatch if network action fails permanently:rollback: type: 'REGISTER_USER_ROLLBACK' meta: name email;
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
See Documentation for configuration options, the full API, and common recipes.
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.
Usage with Redux Persist v5
Redux Offline is a distillation of patterns discovered while building apps using previously existing libraries:
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.