Skip to content
Build Offline-First Apps for Web and React Native
Branch: develop
Clone or download
sorodrigo Merge pull request #289 from redux-offline/fix/default-effect-content…
…-type-header

Fix: adds support for capitalized Content-Type header
Latest commit 8c4a8c0 Dec 12, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/ISSUE_TEMPLATE Add issue template Oct 28, 2018
docs Merge pull request #270 from wacii/nextjs-support Sep 22, 2018
examples/web fix: no promises example Jun 30, 2018
flow-typed/npm Initial version (#2) Mar 28, 2017
src adds support for capitalized Content-Type header Dec 9, 2018
.babelrc Update dev dependencies (#256) Oct 28, 2018
.eslintignore Extract send from middleware Sep 10, 2017
.eslintrc.js Update dev dependencies (#256) Oct 28, 2018
.flowconfig fix: includes missing flow types due to queue config Feb 23, 2018
.gitignore Revert "feat: commit/rollback optional" Sep 19, 2017
.npmignore fix: removes changelog in favor of github releases Feb 23, 2018
.travis.yml Update dev dependencies (#256) Oct 28, 2018
LICENSE Initial commit Mar 11, 2017
README.md Add issue template Oct 28, 2018
package.json
typings.d.ts fix: Ammend createOffline middleware typing Nov 12, 2018
yarn.lock adds support for capitalized Content-Type header Dec 9, 2018

README.md

redux-offline

npm version travis

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/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 followUser = userId => ({
  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:

  <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

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

You can’t perform that action at this time.