#Mobx vs redux how to
#Mobx vs redux code

Here is a regular react example: const Widgets = (props) =>

Mobx is much more simpler, than redux, and more productive.

You can decouple some logic from the component and thus simplify it (computeds, that are similar to useMemo).

Mobx state object is not immutable, this is more convenient for nested state, as you don't need to create a shallow copy all the way to ensure immutability.

Instead of calling setState several times, you can change mobx state object single time. you can store state in an object, that looks just like a regular js object (but is actually a proxy object, that consists of getters and setters).

With mobx you dont need to use useState many times. Redux is more powerful, but the question is simply, do you always need that power If youre a single dev who knows Redux or working in a project with Redux.

It is more convenienient, than regular react state management for components with a complex state. BonusĪ member of the React Native School Community (a perk of joining React Native School) pointed out the library easy-peasy which serves as an abstraction layer on Redux but feels more like Zustand.Mobx is a library for state management by applying functional reactive programming, it is very similar to observer pattern in OOP. MST has some nice features and I really like the way computed values work.

Redux is great when things get larger and more complex, at the cost of being a bit more verbose. I think Zustand is nice for doing things quickly and managing simple data stores. I'm partial to Redux and Zustand as they're feel more familiar to me, though I would absolutely be willing to try MST on a project. ConclusionĮach one has its pros and cons. Reading data is pretty much the same in all of them - only minor differences in the setup/how you make a component listen to data changes. The return value of a Zustand create works like any other hook: as a value changes it will cause a re-render. You pass a function the the create function and what it returns is the value of the hook. The data is usually normalized in Redux and data is kept denormalized in MobX. In Zustand all we have to do is call create to spin up a new store. On the other hand, Redux has one large store where all states are stored. We're using TypeScript in this example, though it isn't required. Creating the Storeįirst step with all of these is to define the store in which we keep the data.

#Mobx vs redux code

The code for each of the examples is available on Github.

You can add a product to your cart via the feed and view/remove items from your cart from the cart screen. This app will have a list of products and a cart.

#Mobx vs redux how to

We'll build a simple e-commerce style app (you can learn how to build a more complex one in our ' Build an E-Commerce App with React Native and Stripe' course).

How we read only the data we need on a screen.

How we access dynamic data across different screens in a React Native app.

How we store global data (what setup is involved?).

What We're Comparing Between Redux, Zustand, and Mobx State Tree

Mobx State Tree: I was only familiar with the name prior to doing the research for this post.

Redux: My prior go to but I haven't used it a lot in a few years.

I've used it exclusively (when I have a choice) over the last year plus. which was using Redux, it is simpler to read and much easier to reason about. I've got different experience levels with each of the state management solutions we're trying today. This conceptual picture can be applied to the above example, or any other. So, in an effort to refamiliarize myself and grow as a developer, I wanted to build the same feature with three different state management frameworks. Over time I've tried different state management solutions but in the last year or so I've been using Zustand nearly exclusively. I've been building a lot of the same stuff, using the same tools, with the same strategies. I'll be honest - I've been in a bit of a rut as of late with development. In this post we'll look at Zustand, Redux, and Mobx State Tree in the context of a simple shopping cart and compare how they allow you to store, update, and read data in a React Native app.