Em JavaScript, o gerenciamento de estado é uma discussão quente hoje em dia. Quando se trata de implementar o gerenciamento de estado, os desenvolvedores geralmente acham difícil lidar com o código padrão no Redux. Portanto, o MobX provou ser uma boa alternativa ao Redux, que oferece a mesma funcionalidade com menos código para escrever. No entanto, ambas as ferramentas de gerenciamento de estado funcionam bem com o React.
Vamos primeiro dar uma olhada nas coisas comuns entre os dois:1) Ambos suportam a depuração de viagem no tempo
2) Ambos contêm bibliotecas de código aberto
3) Ambos fornecem um gerenciamento de estado do lado do cliente
4) Ambos fornecem enorme suporte para estruturas nativas do React
Neste blog, listamos todos os prós e contras de ambas as soluções de gerenciamento de estado. Isso ajudará
os desenvolvedores da web a escolher o melhor para o seu próximo projeto. Antes de discutir isso, comparamos o Redux e o Mobx com base em alguns parâmetros, conforme indicado abaixo:
-> Manutenção e escalável
Devido à presença de funções puras e paradigma de programação funcional, o Redux é mais escalável e sustentável. Portanto, as coisas podem ser facilmente controladas com o Redux.
-> Processo de depuração
A depuração no Redux é uma boa experiência em comparação com o MobX, pois fornece ferramentas incríveis para desenvolvedores e vem com menos abstração. Com o paradigma do fluxo, o Redux se torna mais previsível. Por outro lado, devido a mais abstração e ferramentas médias de desenvolvedor, a depuração no MobX é muito mais difícil.
-> Curva de aprendizado
Aprender MobX é fácil, pois vem com uma curva de aprendizado constante. A presença de abstração máxima facilita a aprendizagem e os desenvolvedores de JavaScript familiarizados com os conceitos de OOP têm uma fortaleza no MobX. Por outro lado, o Redux usa um paradigma de programação funcional que dificulta a compreensão imediata.
-> Comunidade
O Redux tem uma grande base comunitária em comparação com o MobX. Portanto, o Redux fornece excelente suporte da comunidade aos desenvolvedores a qualquer momento e em qualquer lugar.
-> Impuro vs puro
O MobX é impuro, pois os estados podem ser substituídos. Aqui, você pode atualizar facilmente os estados com os novos valores. No entanto, o Redux é puro, pois utiliza funções puras. Aqui, os estados são somente leitura e não podem ser substituídos diretamente. O estado anterior é substituído por um novo estado.
-> Dados observáveis vs simples
O MobX usa um observável para armazenar, enquanto o Redux usa dados Javascript normais para armazenar valores. No Redux, todas as atualizações são rastreadas manualmente.
-> Loja
Uma loja é algo onde os dados são colocados. MobX tem mais de uma loja onde essas lojas são logicamente separadas. Por outro lado, o Redux tem uma grande loja onde todos os estados são armazenados. Os dados geralmente são normalizados no Redux e os dados são mantidos desnormalizados no MobX.
Redux vs MobX: A comparação de códigoInjeção de adereçosA função connect () do React-redux é usada para passar estado e ações para props no Redux. É mostrado abaixo:
// acessando adereços
<ContactForm contact={this.props.contact} loading={this.props.loading} onSubmit={this.submit} />
// função para injetar estado em adereços
function mapStateToProps(state) { return { contact: state.contactStore.contact, errors: state.contactStore.errors } }
// injetando estado e ações em adereços
export default connect(mapStateToProps, { newContact, saveContact, fetchContact, updateContact })(ContactFormPage);
No MobX, o
injetar é usado para injetar a coleção das lojas. Isso disponibilizará lojas em adereços. Aqui, estado e ações são acessados por meio de propriedades no objeto de armazenamento, portanto, não há necessidade de passá-los separadamente.
@inject("stores") @observer // injecting store into props class ContactFormPage extends Component { … // accessing store via props const { contactStore:store } = this.props.stores; return ( <ContactForm store={store} form={this.form} contact={store.entity} /> ) … }
Por isso, usamos redux-connect-decorators para simplificar o código Redux e a versão MobX é sempre fácil de ler. Portanto, não existe um vencedor tão claro.
BootstrappingNo Redux, primeiro, defina a loja e o aplicativo é passado pelo provedor. Para lidar com funções assíncronas, você também precisa definir redux-thunk e redux-promessa-middleware. Depois disso, o redux-devtools-extension permite o armazenamento de depuração no modo de viagem no tempo.
import { applyMiddleware, createStore } from "redux"; import thunk from "redux-thunk"; import promise from "redux-promise-middleware"; import { composeWithDevTools } from 'redux-devtools-extension'; import rootReducer from "./reducers"; const middleware = composeWithDevTools(applyMiddleware(promise(), thunk)); export default createStore(rootReducer, middleware);
// src / index.js
ReactDOM.render( <BrowserRouter> <Provider store={store}> <App /> </Provider> </BrowserRouter>, document.getElementById('root') );
No MobX, várias lojas são configuradas. Ele não precisa de bibliotecas externas para manipular ações assíncronas, mas apenas algumas linhas de código. Você precisa do mobx-remotedev para conectar a ferramenta de depuração redux-devtools-extension.
import remotedev from 'mobx-remotedev'; import Store from './store'; const contactConfig = { name:'Contact Store', global: true, onlyActions:true, filters: { whitelist: /fetch|update|create|Event|entity|entities|handleErrors/ } }; const contactStore = new Store('api/contacts'); const allStores = { contactStore: remotedev(contactStore, contactConfig) }; export default allStores;
// src / index.js
ReactDOM.render( <BrowserRouter> <Provider stores={allStores}> <App /> </Provider> </BrowserRouter>, document.getElementById('root') );
A quantidade de código usada em ambos é, no entanto, a mesma. Porém, o MobX contém menos instruções de importação.
Definindo ações e redutoresAções e redutores são definidos no Redux, seguindo o código:
// ações
export function fetchContacts(){ return dispatch => { dispatch({ type: 'FETCH_CONTACTS', payload: client.get(url) }) } }
// redutores
switch (action.type) { case 'FETCH_CONTACTS_FULFILLED': { return { ...state, contacts: action.payload.data.data || action.payload.data, loading: false, errors: {} } } case 'FETCH_CONTACTS_PENDING': { return { ...state, loading: true, errors: {} } } case 'FETCH_CONTACTS_REJECTED': { return { ...state, loading: false, errors: { global: action.payload.message } } } }
A lógica para ação e redutor é feita em uma classe no MobX. Ele usa OOP devido ao qual a classe Store é refatorada para criar várias lojas usando o construtor de classes. O código respectivo é mostrado abaixo:
@action fetchAll = async() => { this.loading = true; this.errors = {}; try { const response = await this.service.find({}) runInAction('entities fetched', () => { this.entities = response.data; this.loading = false; }); } catch(err) { this.handleErrors(err); } }
Portanto, vimos que a lógica definida nas duas soluções de gerenciamento de estado faz o mesmo trabalho. A única diferença é que usamos 33 linhas de código no Redux e 14 linhas de código no MobX para alcançar o resultado. Portanto, você pode criar aplicativos mais rapidamente com o MobX.
Por que usar os aplicativos MobX for React?O MobX é uma biblioteca testada que torna o gerenciamento de estado simples e escalável, aplicando a programação reativa funcional (TFRP) de forma transparente. React e MobX é uma combinação poderosa juntos.
- Menos código para escrever
- Fácil de aprender
- Dados aninhados são fáceis
- Suporte para programação orientada a objetos
Por que não usar MobX?- Difícil de depurar
- Melhores alternativas presentes
- Dá muita liberdade
Por que usar o Redux para aplicativos React?O Redux é uma biblioteca independente que pode ser usada com a estrutura da interface do usuário, incluindo JS Angular, Vue, Ember, React e vanilla.
- Extensibilidade via middlewares
- Popularidade e comunidade
- Suporte de ferramentas
- Previsibilidade e simplicidade
- Fluxo de dados unidirecional e imutabilidade
- Separação de dados e apresentação
Por que não usar o Redux?- Boilerplate (redutores, seletores, visualizações, tipos de ação, criadores de ação, ...)
- As ações são desconectadas de seus efeitos (conforme definido no redutor)
- Nenhuma solução pronta para o uso para lidar com efeitos colaterais (disponível em middlewares como redux-thunk ou redux-saga)
Nota final:Agora, você pode ver que a base de código MobX é muito mais ágil. Usando o estilo OOP e boas práticas de desenvolvimento, você pode criar rapidamente aplicativos React. A principal desvantagem é que é muito fácil escrever código ruim e impossível de manter.
Por outro lado, o Redux é popular e adequado para a construção de projetos grandes e complexos. É uma estrutura rigorosa com salvaguardas que garante que cada desenvolvedor grave um código fácil de testar e manter. No entanto, não é adequado para pequenos projetos.
Espero ter fornecido informações suficientes para esclarecer se é necessário migrar para o MobX ou continuar com o Redux. Por fim, a decisão depende do tipo de projeto em que você está trabalhando e dos recursos disponíveis para você.