Nader Dabit
Nader Dabit

Siga

1 de Maio de 2017 · 5 min de leitura

ReSub é uma biblioteca disponibilizada pela Microsoft + Open Source para gravação de Reagir componentes que gerencia automaticamente inscrições para fontes de dados simplesmente acessando-los.

sugere o uso do TypeScript. De seus documentos:

é bom usar reenviar Sem TypeScript, mas sem acesso aos decoradores de métodos do TypeScript, lojas e componentes não podem alavancar autosubscriptions e, como tal, perder muito de seu valor.

ReSub cairia nas mesmas categorias que Redux ou MobX.

na minha opinião, a coisa mais próxima que eu compararia isso é MobX. A biblioteca ReSub gerencia automaticamente assinaturas de fontes de dados simplesmente acessando-as e tem sido muito bom trabalhar em minha experimentação até agora, reduzindo o clichê e oferecendo uma API fácil de entender.

neste post, vou analisar como configurar um novo projeto React Native e implementar o ReSub como uma maneira de gerenciar o estado. Faremos isso criando um aplicativo todo muito básico.

o código final para este exemplo está localizado aqui e está no ramo resub-medium-example.

para começar, primeiro criaremos um novo projeto React Native, configuraremos o TypeScript, adicionaremos e configuraremos tsconfig.json e instalaremos os tipos React e React Native necessários, bem como a dependência de reenvio.

  1. Crie o projeto e mude para o diretório
react-native init rnresub// then cd into directory after project is createdcd rnresub

2. Instale o TypeScript (neste tutorial, estamos usando a versão 2.3.2)

npm i typescript --save-dev

3. Instalar tipos

npm i @types/react-native @types/react --save-dev

4. Instalar Reenvio

npm i resub --save

5. Criar tsconfig.json

touch tsconfig.json

Em tsconfig.json adicione o seguinte config:

{
"compilerOptions": {
"target": "es2015",
"module": "commonjs",
"jsx": "react",
"outDir": "build",
"rootDir": "src",
"allowSyntheticDefaultImports": true,
"noImplicitAny": true,
"experimentalDecorators": true,
"preserveConstEnums": true,
"allowJs": true,
"sourceMap": true
},
"exclude": 
}

acima de configuração, estamos definindo algumas coisas, como o nosso diretório raiz (rootDir, na nossa aplicação src) e criar diretório de saída (outDir, no nosso aplicativo de compilação).

o diretório de saída (build) será criado para nós quando o typescript for compilado.

isso significa que agora precisamos ir em frente e criar o diretório src, que é onde estaremos escrevendo todo o nosso texto datilografado.

em seguida, adicione um script de compilação ao seu pacote.json em scripts:

"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest",
"build": "tsc -w"
},

com este script, podemos chamar npm run build de nossa linha de comando e ele iniciará o compilador typescript. O sinalizador -w dirá ao compilador para observar os arquivos para quaisquer alterações e, quando as alterações acontecerem, ele recompilará o código automaticamente.

na raiz do projeto, crie o diretório src com dois arquivos: um ponto de entrada (App.tsx)e um armazenamento(TodoStore.tsx). A Loja será o nosso armazenamento de dados.

mkdir src
touch src/App.tsx src/TodosStore.tsx

agora que nossos arquivos e dependências estão configurados, vamos atualizar o índice.s.JS ou índice.androide.arquivo js para usar o código que será compilado pelo TypeScript.

em índice.s.JS ou índice.androide.js, atualize o arquivo para o seguinte:

import React, { Component } from 'react'import {
AppRegistry
} from 'react-native'import App from './build/App'AppRegistry.registerComponent('rnresub', () => App)

agora podemos criar nossa loja.

Em TodosStore.tsx, crie a seguinte classe, pela qual passaremos passo a passo:

  1. No topo do arquivo, importar StoreBase, que é a classe base que ReSub nos dá, e o que vamos estender para criar nossa loja, bem como dois decoradores que irá manter os dados sincronizados (autoSubscribeWithKey e autoSubscribeStore).
  2. no topo da classe, criamos duas variáveis: uma matriz _todos e uma string _textInputValue.
  3. o método updateTextInputValue receberá um valor de uma entrada de texto e, em seguida, atualizará o _textInputValue com o valor passado para o método.
    depois de fazer isso, chamamos this.trigger(TriggerKeys.InputTextKey) que acionará todas as assinaturas que estão assinadas usando o decorador autoSubscribeWithKey(TriggerKeys.InputTextKey), atualizando os componentes que estão usando esses dados com os dados de armazenamento atualizados.
    trigger() está disponível como um método de StoreBase, que estendemos para criar nossa loja.
  4. addTodo primeiro verificará se há um valor a ser adicionado e, se não, retornará sem fazer nada.
    caso contrário, pegamos o _textInputValue existente, bem como o array todos existente, e então criamos um novo array, passando o novo todo como o último item no array.
    uma vez que a nova matriz é criada, atualizamos o _textInputValue para ser uma string vazia e novamente chamamos this.trigger()
  5. getTodos retorna a lista de _todos. Adicionamos o decorador autoSubscribeWithKey(TriggerKeys.TodosChangedKey) para garantir que, sempre que os dados mudarem, qualquer componente usando esses dados será atualizado.
  6. getTextInputValue faz a mesma coisa que getTodos não, mas para o _textInputValue valor

Agora que a loja é completa, vamos criar o último arquivo que iremos usar, o App.tsx.

Há um pouco acontecendo aqui, e eu vou orientá-lo próximo, mas é realmente um muito implementação básica, com algumas coisas que são específicas para ReSub, mais notavelmente eu acho é que estamos estendendo a ComponentBase classe de ReSub vs Component classe de Reagir.

  1. Nós importar as dependências vamos precisar para o arquivo
  2. criamos um State interface, e nele podemos declarar um todos array e um todo string
  3. gostaríamos de estender o ComponentBase classe de Resub, o que nos dá não só o ciclo de vida de métodos que são utilizados no Reagir, mas também alguns outros métodos úteis, nomeadamente _buildState que é o que vamos usar para amarrar o nosso estado de componente com o estado de armazenamento. Confira os documentos buildState vinculados para saber mais sobre _buildState, mas basicamente é um método chamado para reconstruir o estado do módulo quando a loja é atualizada.
  4. o resto deste componente são alguns métodos básicos que atualizam a matriz store todos, A store _textInputValue e adicionam algum estilo.

agora no terminal, execute typescript:

npm run build

em seguida, execute o aplicativo React Native em seu emulador, e devemos ver um aplicativo todo funcional!

novamente, o código para este exemplo está localizado aqui.

chamo-me Nader Dabit . Sou um defensor do desenvolvedor no AWS Mobile trabalhando com projetos como AppSync e Amplify, e fundador do React Native Training.

se você gosta de React e React Native, confira nosso podcast-React Native Radio on Devchat.tv.

além disso, confira meu livro, React Native em ação agora disponível na Manning Publications

se você gostou deste artigo, recomende e compartilhe! Obrigado pelo seu tempo