State management in React-Native
Redux vs Mobx
El Problema
En las aplicaciones agregamos Componentes
Cada componente tiene su estado interno accesible con this.state y setState(...)
Internamente al componente - funciona
La conexión entre componentes se complica
Compartir o mutar un estado entre componentes
Evitar re-render
Redux
- single-store
- immutable state
- funcional programming
- normalized state
- very strict architecture
- passive (event oriented)
MobX
- multi-store
- mutable state
- object oriented
- object state
- do what you want
- reactive (observable)
Redux
- more boilerplate
- exponencial learning curve
- follow the rules
- easily testable
- strong community
- tools
MobX
- linear learning curve
- lazy rules
- reactive (observable)
- magic
- community & tools
Comparison (pros and cons are relatives)
Best choice?
Redux over Mobx
- complex projects
- big teams
- very structured architectures
Mobx over Redux
- fast prototyping
- small teams
- good internal organization
You can always refactor from MobX to redux if needed
My personal advice
(why MobX?)
Start with Mobx
- object programming
- reactive
- less boilerplate
Go strict
- when your project / team is growing, force strict using @action @computed instead of direct mutation
React-Native
An app is a small project for definition.
If is not, maybe you're over-engineering.
More info
Code Example - Redux way
const initialState = {
users: [
{
name: 'Paolo'
},
{
name: 'Dan'
}
]
};
// reducer
function users(state = initialState, action) {
switch (action.type) {
case 'USER_ADD':
return { ...state, users: [ ...state.users, action.user ] };
default:
return state;
}
}
// action
{ type: 'USER_ADD', user: user };
// somewhere in the app ...
dispatch({ type: 'USER_ADD', user: user });
Code Example - MobX way
class UserStore {
@observable users = [
{
name: 'Paolo'
},
{
name: 'Dan'
}
];
// if you want to go strict using @action
@action addUser = (user) => {
this.users.push(user);
}
}
//somewhere in the app
userStore.users.push(user);
// strict case
userStore.addUser(user);
MobX - Redux - Spanish
By Paolo Mosca
MobX - Redux - Spanish
Short comparative for state management in React-Native
- 212