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
Yarn)
1. Install with npm (orFor React Native 0.60+
npm install --save @redux-offline/redux-offline@native
For React Native Expo SDK 36
npm install --save @redux-offline/redux-offline@expo
For React Native <= 0.59
npm install --save @redux-offline/redux-offline
offline
store enhancer with compose
2. Add the ;;; // ... const store = ;
3. Decorate actions with offline metadata
const followUser = type: 'FOLLOW_USER_REQUEST' payload: userId meta: 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 registerUser = type: 'REGISTER_USER' payload: name email meta: 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 AndroidManifest.xml
:
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
Usage with Redux Persist v5
In case you want to use a custom redux-persist version, there is an example configuration.
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