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

MobX - Redux - Spanish

By Paolo Mosca

Made with Slides.com

MobX - Redux - Spanish

Short comparative for state management in React-Native

  • 209

More from Paolo Mosca