Parece-me que chegou a hora de compartilhar a abordagem para escrever o ReactJS App,
e não pretendo ser único.O primeiro parágrafo pode ser pulado . Estou envolvido no desenvolvimento da web há muito tempo, mas, nos últimos quatro anos, estive firme no ReactJS e tudo me convinha, tive redux na minha vida, mas há dois anos conheci a MobX, apenas alguns meses atrás tentei voltar ao redux, mas não o fiz. Eu pude, havia uma sensação de que estava fazendo algo supérfluo, talvez algo não estivesse certo, muitos bytes nos servidores já haviam sido traduzidos sobre este tópico, o artigo não era sobre a frieza de um antes do outro, é apenas uma tentativa de compartilhar minhas melhores práticas, talvez alguém realmente essa abordagem continuará e, assim, ao ponto.
As tarefas que iremos resolver:- di conexão para componentes
- renderização do servidor com carregamento de dados assíncrono
A estrutura do projeto pode ser visualizada no
Github . Portanto, vou pular como escrever um aplicativo primitivo e o artigo destacará apenas
Introduzimos conceitos como: modelo de dados, serviço, lado.
Vamos pegar um modelo simples
TodoModel.tsimport { observable, action } from 'mobx'; export class TodoModel { @observable public id: number; @observable public text: string = ''; @observable public isCompleted: boolean = false; @action public set = (key: 'text' | 'isCompleted', value: any): void => { this[key] = value; }; }
o que você vê é a ação definida, no modelo é mais uma exceção do que um bom tom, geralmente em um projeto existe um modelo básico com ajudantes primitivos e é apenas herdado dele, nos modelos não deve haver nenhuma ação para o bem.
Agora precisamos aprender a trabalhar com esse modelo, iniciar um serviço:
TodoService.ts import { Service, Inject } from 'typedi'; import { plainToClass, classToClass } from 'class-transformer'; import { DataStorage } from '../storage/DataStorage'; import { action } from 'mobx'; import { TodoModel } from '../models/TodoModel'; const responseMock = { items: [ { id: 1, isCompleted: false, text: 'Item 1' }, { id: 2, isCompleted: true, text: 'Item 2' } ] }; @Service('TodoService') export class TodoService { @Inject('DataStorage') public dataStorage: DataStorage; @action public load = async () => { await new Promise(resolve => setTimeout(resolve, 300)); this.dataStorage.todos = plainToClass(TodoModel, responseMock.items); }; @action public save(todo: TodoModel): void { if (todo.id) { const idx = this.dataStorage.todos.findIndex(item => todo.id === item.id); this.dataStorage.todos[idx] = classToClass(todo); } else { const todos = this.dataStorage.todos.slice(); todo.id = Math.floor(Math.random() * Math.floor(100000)); todos.push(todo); this.dataStorage.todos = todos; } this.clearTodo(); } @action public edit(todo: TodoModel): void { this.dataStorage.todo = classToClass(todo); } @action public clearTodo(): void { this.dataStorage.todo = new TodoModel(); } }
Nosso serviço tem um link para
DataStorage.ts import { Service } from 'typedi'; import { observable } from 'mobx'; import { TodoModel } from '../models/TodoModel'; @Service('DataStorage') export class DataStorage { @observable public todos: TodoModel[] = []; @observable public todo: TodoModel = new TodoModel(); }
Nesta loja, armazenaremos o estado de nosso aplicativo, pode haver muitas lojas, mas, como a prática demonstrou, não faz sentido invadir muitas lojas pequenas. Na loja, assim como nos modelos, não deve haver ação.
Temos quase tudo pronto, resta conectar tudo à nossa aplicação, para isso, apertaremos um pouco o injetor do mobx-react:
DI import { inject } from 'mobx-react'; export function DI(...classNames: string[]) { return (target: any) => { return inject((props: any) => { const data: any = {}; classNames.forEach(className => { const name = className.charAt(0).toLowerCase() + className.slice(1); data[name] = props.container.get(className); }); data.container = props.container; return data; })(target); }; }
e obter um contêiner para o nosso DI
browser.tsx import 'reflect-metadata'; import * as React from 'react'; import { hydrate } from 'react-dom'; import { renderRoutes } from 'react-router-config'; import { Provider } from 'mobx-react'; import { BrowserRouter } from 'react-router-dom'; import { Container } from 'typedi'; import '../application'; import { routes } from '../application/route'; hydrate( <Provider container={Container}> <BrowserRouter>{renderRoutes(routes)}</BrowserRouter> </Provider>, document.getElementById('root') );
Para o navegador, sempre temos um contêiner, mas para a renderização do servidor que você precisa procurar, é melhor organizar seu contêiner para cada solicitação:
server.tsx import * as express from 'express'; import * as React from 'react'; import { Container } from 'typedi'; import '../application';
A renderização do servidor é na verdade uma coisa delicada, por um lado, quero deixar tudo passar,
mas ele tem apenas uma tarefa comercial, para fornecer conteúdo aos bots , por isso é melhor procurar algo como "o usuário fez login pelo menos uma vez no site" e pule a renderização do servidor com a criação de contêineres no servidor.
Bem, agora para nossos componentes:
MainRoute.tsx import * as React from 'react'; import { TodoService } from '../service/TodoService'; import { observer } from 'mobx-react'; import { DI } from '../annotation/DI'; import { DataStorage } from '../storage/DataStorage'; import { Todo } from '../component/todo'; import { Form } from '../component/form/Form'; import { ContainerInstance } from 'typedi'; interface IProps { todoService?: TodoService; dataStorage?: DataStorage; } @DI('TodoService', 'DataStorage') @observer export class MainRoute extends React.Component<IProps> { public static async loadData(container: ContainerInstance) { const todoService: TodoService = container.get('TodoService'); await todoService.load(); } public componentDidMount() { this.props.todoService.load(); } public render() { return ( <div> <Form /> <ul> {this.props.dataStorage.items.map(item => ( <li key={item.id} ><Todo model={item} /></li> ))} </ul> </div> ); } }
Tudo se mostra muito lógico e bonito aqui, nossa visualização de renderização extrai dados de nossa loja, dizem os ganchos de componentes em que momento devemos carregar os dados.
Todo.tsx import * as React from 'react'; import { TodoModel } from '../../models/TodoModel'; import { TodoService } from '../../service/TodoService'; import { DI } from '../../annotation/DI'; import { observer } from 'mobx-react'; interface IProps { model: TodoModel; todoService?: TodoService; } @DI('TodoService') @observer export class Todo extends React.Component<IProps> { public render() { const { model, todoService } = this.props; return ( <> <input type='checkbox' checked={model.isCompleted} onChange={e => model.set('isCompleted', e.target.checked)} /> <h4>{model.text}</h4> <button type='button' onClick={() => todoService.edit(model)}>Edit</button> </> ); } }
Form.tsx import * as React from 'react'; import { observer } from 'mobx-react'; import { DI } from '../../annotation/DI'; import { TodoService } from '../../service'; import { DataStorage } from '../../storage'; import { TextField } from '../text-field'; interface IProps { todoService?: TodoService; dataStorage?: DataStorage; } @DI('TodoService', 'DataStorage') @observer export class Form extends React.Component<IProps> { public handleSave = (e: any) => { e.preventDefault(); this.props.todoService.save(this.props.dataStorage.todo); }; public handleClear = () => { this.props.todoService.clearTodo(); }; public render() { const { dataStorage } = this.props; return ( <form onSubmit={this.handleSave}> <TextField name='text' model={dataStorage.todo} /> <button>{dataStorage.todo.id ? 'Save' : 'Create'}</button> <button type='button' onClick={this.handleClear}> Clear </button> </form> ); } }
Na minha opinião, trabalhar com formulários é muito mais conveniente por meio de modelos / dtos, você pode usar os formulários nativos usuais e atualizar o modelo de dados e todos que ouvirem serão atualizados instantaneamente.
Algo assim, eu uso esse monte de bibliotecas: reagir, transformador de classe, mobx, typedi
Agora estamos usando essa abordagem em prod. Esses são projetos muito grandes, com componentes e serviços comuns.
Se essa abordagem for interessante, mostrarei como validamos modelos antes de enviá-los ao servidor, como processamos erros no servidor e como sincronizamos nosso estado entre as guias do navegador.
De fato, tudo é muito bônus: "validador de classe", "localStorage + window.addEventListener ('storage')"
Obrigado pela leitura :-)
Exemplo