redux offline

Buscadores buscados

Tienda Redux persistente para RaupeAboutable ™ ️ Aplicaciones fuera de línea primero, con soporte de primera clase para la interfaz de usuario optimista. Use con React, React nativo o como contenedor de estado independiente para cualquier aplicación web.

Redux fuera de línea ahora está siendo mantenido por un equipo impulsado por la comunidad. Las nuevas versiones de la biblioteca ahora estarán disponibles bajo la organización NPM @redux-offline . Muchas gracias a @Jevakallio por crear esta increíble biblioteca en primer lugar.

Comienzo rápido

1. Instale con NPM (o hilo)

Para react nativo 0.60+

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

Para React Native Expo SDK 36

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

Para react nativo <= 0.59

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

2. Agregue el potenciador de la tienda offline con 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. Decorar acciones con metadatos fuera de línea

 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 } }
    }
  }
} ) ;

Si la carga útil del efecto es algo más que JSON, puede pasar el cuerpo y los encabezados:

 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) solicite permiso para leer el estado de la red

Si escribe una aplicación nativa para Android, deberá asegurarse de solicitar el permiso para acceder al estado de red en su AndroidManifest.xml :

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

---

Consulte la documentación para opciones de configuración, la API completa y las recetas comunes.

Que contribuye

Mejoras y adiciones bienvenidas. Para grandes cambios, envíe un problema de discusión antes de saltar a la codificación; Te odiaríamos para desperdiciar el esfuerzo.

Si informa un error, incluya un código que reproduce el error. Aquí hay una aplicación inicial en Codesandbox.

En lugar de una guía de estilo formal, siga las reglas de Eslint incluidas y use más bonito para formatear su código.

Miscelánea

Uso con Redux Persist V5

En caso de que desee usar una versión personalizada de Redux-Persist, hay una configuración de ejemplo.

Arte anterior

Redux fuera de línea es una destilación de patrones descubiertos al crear aplicaciones que usan bibliotecas previamente existentes:

• Forbes Lindesay's Redux-Optimist
• Redux-Persist de Zack Story

Sin su trabajo, Redux fuera de línea no existiría. Si le gustan las ideas detrás de Redux fuera de línea, pero desea construir su propia pila a partir de componentes de nivel inferior, estos son buenos lugares para comenzar.

Licencia

MIT