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

https://medium.com/@conanmy/move-from-mobx-to-redux-a3481c2d71f4

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