Redux vs MobX

Component in plain React

class Movie extends Component {
  constructor(props) {
    super(props)

    this.state = { favorite: false }
  }

  like() {
    this.setState({favorite: true})
  }

  render() {
    return (
        <div className='movie'>
          <h3>{this.props.movie.title}</h3>
          {this.state.favorite ?
              <p>It is your favorite movie!</p>
              :
              <button onClick={this.like.bind(this)}>Favorite this movie</button>
          }
        </div>
    )
  }
}

export default Movie

Component with Redux

class Movie extends Component {
  render() {
    return (
      <div className='movie'>
        <h3>{this.props.movie.title}</h3>
        {this.props.favorite ?
            <p>It is your favorite movie!</p>
            :
            <button onClick={MovieActions.like}>
              Favorite this movie
            </button>
        }
      </div>
    )
  }
}

function mapStateToProps(state) {
  return { movie: state.movie, favorite: state.favorite };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(MovieActions, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(Movie);

Store

function (initialState) {
  return createStore(
      combineReducers({ movie: movieReducer }),
      initialState,
      window.devToolsExtension && window.devToolsExtension()
  );
}

Reducer

const update = (state, mutations) =>
    Object.assign({}, state, mutations);

function (state = {}, action) {
  switch (action.type) {
    case 'movie/like':
      return update(state, { favorite: true });
    default:
      return state;
  }
}

Action

function play(video) {
  return { type: 'movie/like' };
}

Component with Mobx

 

@inject('store')
@observer
class Movie extends Component {
  render() {
    const store = this.props.store
    
    return (
      <div className='movie'>
        <h3>{store.movie.title}</h3>
        {store.favorite ?
            <p>It is your favorite movie!</p>
            :
            <button onClick={store.like}>Favorite this movie</button>
        }
      </div>
    )
  }
}

export default Movie

Store

class MovieStore {
  movie = {}
  @observable favorite = false

  @action like() {
    this.favorite = favorite
  }
}

const movieStore = new MovieStore()
export default movieStore

Redux

  • single store
  • FP paradigm
  • immutable
  • pure
  • explicit update logic
  • plain JavaScript
  • more boilerplate
  • normalized state
  • flat state

MobX

  • multiple stores
  • OOP&RP paradigms
  • mutable
  • impure
  • implicit update logic
  • “magic” JavaScript
  • less boilerplate
  • denormalized state
  • nested state

from: https://www.robinwieruch.de/redux-mobx-confusion/

Redux vs Mobx

By Maciek Walusiak

Made with Slides.com

Redux vs Mobx

  • 98

More from Maciek Walusiak