redux offline

Os mantenedores queriam

Store Redux Persistente para Aplicativos Offline-Primeiro, de primeira classe, com suporte de primeira classe para a interface do usuário otimista. Use com reação, react nativo ou como contêiner de estado independente para qualquer aplicativo da web.

O Redux Offline agora está sendo mantido por uma equipe orientada pela comunidade. As novas versões da biblioteca agora estarão disponíveis na organização NPM @redux-offline . Muito obrigado a @Jevakallio por criar esta incrível biblioteca em primeiro lugar.

Início rápido

1. Instale com NPM (ou fio)

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. Adicione o intensificador de lojas offline com 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. Decore as ações com metadados offline

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

Se a carga útil do efeito for algo diferente de JSON, você pode passar pelo corpo e aos cabeçalhos:

 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 Android nativo) Peça permissão para ler o status da rede

Se escrever um aplicativo nativo para o Android, você precisará solicitar a permissão para acessar o estado da rede no seu AndroidManifest.xml :

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

---

Consulte a documentação para opções de configuração, a API completa e as receitas comuns.

Contribuindo

Melhorias e adições são bem -vindas. Para grandes alterações, envie um problema de discussão antes de pular para a codificação; Nós odiaríamos você para desperdiçar o esforço.

Se você estiver relatando um bug, inclua código que reproduz o erro. Aqui está um aplicativo inicial no CodESandBox.

Em vez de um guia de estilo formal, siga as regras de ESLint incluídas e use mais bonito para formatar seu código.

Miscelânea

Uso com Redux Persist V5

Caso você queira usar uma versão personalizada do Redux-Persist, há uma configuração de exemplo.

Arte anterior

Redux Offline é uma destilação de padrões descobertos ao criar aplicativos usando bibliotecas anteriormente existentes:

• O Otimista Redux do Forbes Lindesay
• O Redux-Persist de Zack Story

Sem o trabalho deles, o Redux offline não existiria. Se você gosta das idéias por trás do Redux Offline, mas deseja construir sua própria pilha a partir de componentes de nível inferior, esses são bons lugares para começar.

Licença

Mit