Code Monkey home page Code Monkey logo

redux-vs-mobx's Introduction

Redux-vs-Mobx

Hello everyone!

In this repo, I am going to compare two libraries designated to React (i.e. Redux and Mobx) Both library is related and specified to storing data in React along with other state management techniques. I suggest you to refer to other repo of mine to know how to use redux in detail. so, If you search on the internet for these two libraries and do some real project as I did, you reach a list of cons and pros as below:

Redux

The structure of how the library is working is in the repository I just mentioned above is like this:

redux store

The description is simple: Suppose 'store' as a watermelon and 'slicers' as pieces of it containing 'reducers', and 'data', to be used in a 'component' as a plate. Or imagine 'store' as a 'database', 'tables' as 'slices', 'queries' as 'reducers' and 'data', to be used in html view... You can find other description of how things are working on the internet, like these:

Google-Doc-GIF

or this in comparison to Flux:

53610441-d48ca180-3c05-11e9-8f1f-21180a50d524

But MobX is a little bit different: as it's being mentioned in its official guide, it is supposed to be simpler and more scalable. I'm telling you that I agree with them in first term but scalability is a bit tricky and shoule be tested on huge applications. Frankly I didn't test it on large and compliceted databases but MobX official website claimed that it''s 100% sure that it's scalable. At the time of providing this repository, I've never seen companies use MobX as their state management in React world.

Mobx store

another graph is:

sheme-1

finally you can find a good sample of MobX at this repo.

Now comparison

  • Redux is more structural with all parts seperated but MobX is seeking for simplicity and user-friendly environment by putting everything on sight.
  • the coding is easier to be learnt in MobX thatn Redux, but once you followed the structure above I presented and my repo you'll be sure that it's too easy to learn how Redux works.
  • Redux has been proved to be scalable even when you have several databases and it seems complicated and tiring to integrate them. But MobX is not that way. It's been claimed that it supports full scalability but I don't think so! Sorry bros...
  • The store is more conotrollable in Redux than in MobX
  • in Redux you should wait for a component to be mounted (ComponentDidMount() function) but in MobX, it's been rendered before the component loads. Cool yeah but be careful of server CPU, memory usage and bandwidth consumption.

Have Fun!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.