JavaScript React Native React offline-capable Redux
Need help with redux-offline?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.
redux-offline

Description

Build Offline-First Apps for Web and React Native

5.9K Stars 382 Forks MIT License 350 Commits 56 Opened issues

Services available

Need anything else?

redux-offline

npm version travis

Persistent Redux store for Reasonaboutable:tm: 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)
For React Native 0.60+
npm install --save @redux-offline/[email protected]

For React Native Expo SDK 36

npm install --save @redux-offline/[email protected]

For React Native <= 0.59

npm install --save @redux-offline/redux-offline
2. Add the
offline
store enhancer with
compose
import { applyMiddleware, createStore, compose } from 'redux';
import { offline } from '@redux-offline/redux-offline';
import offlineConfig from '@redux-offline/redux-offline/lib/defaults';

// ...

const store = createStore( reducer, preloadedState, 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', 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 = (name, email) => ({
  type: 'REGISTER_USER',
  payload: { name, email },
  meta: {
    offline: {
      // the network action to execute:
      effect: { url: '/api/register', method: 'POST', body: `name=${name}&email=${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:

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.