Blog | Global State: MobX vs Redux

Personally, the only 2 state management libraries I encountered and utilized in professional projects are Redux and MobX.

Given it resembles singleton pattern, we used MobX heavily for handling Global State.

But on the other hand, in majority of the other projects wherein Redux was used, I didn’t find anything wrong with using it for handling Global State as well.

I am particularly a fan of Redux Slice pattern, and I know, many of you are as well.

Performance wise, they both perform very well and I would definitely recommend either of them, but lets have a look how they differ in -

Ease of use
Bulkiness
Just common sense

Example

I have seen the list of users being used as the global state, when I worked in ECS Infosoultions, developing dashboards for Amazon Connect Agents.

So I will consider the same here. Lets define a User first.

// types/User.ts
export type User = {
  name: string;
  premium: boolean;
};

Contents of my Global State

The list of users.
An action to add a user.
Total number of users.
List of Premium users.

MobX

Setup

With MobX, the most common and recommended pattern is via defining a class which will be an observable. The way we make an observable in MobX is via makeObservable method.

Let me just show you this class first, then I’ll explain components of it later.

import { action, computed, makeObservable, observable } from "mobx";
import { User } from "../types/User";

class GlobalState {
  users: User[] = [];

  get noOfUsers() {
    return this.users.length;
  }

  get premiumUsers() {
    return this.users.filter((user) => user.premium);
  }

  addUser(user: User) {
    this.users = [...this.users, user];
  }

  constructor() {
    makeObservable(this, {
      users: observable,
      noOfUsers: computed,
      premiumUsers: computed,
      addUser: action,
    });
  }
}

Using makeObservable method, we have provided clear distinction between -

the actual observable value
actions to update the observable value
and the values which are computed from the live observable value.

This is the terminology of MobX. If we now want to use this global state across all of our components, we can simply do -

const globalState = new GlobalState();

export default globalState;

and use it throughout our application.

However, the official documentation of MobX recommends us to use a React Context to encapsulate and provide this global object to the components.

Why? so that all the React components which is utilizing the global state can be unit tested effeciently.

No worries, we will wrap it in a context and also provide a hook to access the global state object.

const GlobalStateContext = createContext<GlobalState | undefined>(undefined);

interface ProviderProps {
  children: React.ReactNode;
}
const GlobalStateProvider = ({ children }: ProviderProps) => {
  return (
    <GlobalStateContext.Provider value={new GlobalState()}>
      {children}
    </GlobalStateContext.Provider>
  );
};

export function useGlobalState() {
  const context = useContext(GlobalStateContext);
  if (!context)
    throw new Error("Please wrap the component with the Provider first");
  return context;
}

export default GlobalStateProvider;

Once this is done, make sure to wrap your entire application code with <GlobalStateProvider>, otherwise everything will fail and you’ll scratch your head for atleast 5 minutes!

Usage

In order to use the GlobalState observable, or just any observable, the React component needs to be wrapped by a higher order component named observer which comes from the mobx-react-lite package.

Lets say we have a component to display total number of users in the system. It’ll look something like this -

import { observer } from "mobx-react-lite";
import { useGlobalState } from "../data/globalMobX";

const UserCount = observer(() => {
  const globalState = useGlobalState();
  return <h1>Number of current users is - {globalState.noOfUsers}</h1>;
});

export default UserCount;

observer HOC will help this component observe live updates being made to the observables, and re-render accordingly.

We also have one more component - <AddUser> which, as the name suggests, is responsible for adding a new user.

import { observer } from "mobx-react-lite";
import { useState } from "react";
import { User } from "../types/User";
import { useGlobalState } from "../data/globalMobX";

const AddUser = observer(() => {
  const [name, setName] = useState("");
  const [premium, setPremium] = useState(false);
  const globalState = useGlobalState();

  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const newUser: User = {
      name,
      premium,
    };
    globalState.addUser(newUser);
    setName("");
  }

  return (
    <form
      onSubmit={handleSubmit}
      className="flex flex-col gap-2 p-4 border-2 border-gray-600 w-max"
    >
      //...
    </form>
  );
});

export default AddUser;

actions are also accessed in the same way as observables from the globalState object which really feels consistent and simple.

Redux

Setup

There are various patterns with Redux as well, but the one which is recommended the most is the slice pattern which I prefer as well.

Redux Slices as usually utilized to capture an entire feature of the application. But one of these slices can be utilized to capture just the global state of the application.

Slices in Redux are created using createSlice() function which is available in @reduxjs/toolkit package. For our example global state, this is how our slice is going to look like -

import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { User } from "../types/User";

type GlobalStateType = {
  users: User[];
};

const initialState: GlobalStateType = {
  users: [],
};

const GlobalStateSlice = createSlice({
  name: "global-state",
  initialState,
  reducers: {
    addUser(state, action: PayloadAction<User>) {
      state.users = [...state.users, action.payload];
    },
  },
  selectors: {
    selectNoOfUsers: (state) => state.users.length,
    selectPremiumUsers: (state) => state.users.filter((user) => user.premium),
  },
});

So concise, ain’t it ?

It just takes in the slice name, bunch of reducer methods, selectors which can be used to return computed values and the initial state.

Yes, it just doesn’t stop there. It has way more things packed inside of it. You can check them all out here - Redux - createSlice.

But as of now, this slice is of no use to us. It internally uses createReducer and creates an ultimate reducer for the feature it was created for.

It also automatically generates actions, which can be fetched by just doing GlobalStateSlice.actions. And the same logic goes for selectors as well.

Lets see it -

const GlobalStateReducer = GlobalStateSlice.reducer;
export const { addUser } = GlobalStateSlice.actions;
export const { selectNoOfUsers, selectPremiumUsers } =
  GlobalStateSlice.selectors;

export default GlobalStateReducer;

Here we have exported all the necessary actions, selectors and the reducer which we will append in our redux store later.

Usage

First of all a store needs to be configured via configureStore function from @reduxjs/toolkit package.

// data/reduxStore.ts
import { configureStore } from "@reduxjs/toolkit";
import GlobalStateReducer from "./globalRedux";
import { useDispatch } from "react-redux";

const store = configureStore({
  reducer: {
    global: GlobalStateReducer,
  },
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
export const useAppDispatch = () => useDispatch<AppDispatch>();

export default store;

As you can see, the reducer we obtained from GlobalStateSlice is passed here with key global which means global state can be accessed via state.getState().global.

The next 3 lines after configureStore function are just some TypeScript necessities which we’ll need later to access redux state and dispatch actions.

Oh, one more important thing, make sure to wrap the entire application code with <Provider> component that we get from react-redux package. We’ll have to pass the store that we just created as a prop to the <Provider>.

import { Provider } from "react-redux";
import store from "./data/reduxStore";

export default function App() {
  return (
    <Provider store={store}>
      //....
    </Provider>
  );
}

Now, lets get back to our UserCount component. This is how it’ll look -

import { useSelector } from "react-redux";
import { RootState } from "../data/reduxStore";
import { selectNoOfUsers } from "../data/globalRedux";

const UserCount = () => {
  const noOfUsers = useSelector((state: RootState) =>
    selectNoOfUsers({ "global-state": state.global }),
  );
  return <h1>Number of current users is - {noOfUsers}</h1>;
};

export default UserCount;

noOfUsers value can now be computed via useSelector hook and the selector that we had prepared in the GlobalStateSlice.

And the <AddUser> component will look like -

import { useState } from "react";
import { User } from "../types/User";
import { useAppDispatch } from "../data/reduxStore";
import { addUser } from "../data/globalRedux";

const AddUser = () => {
  const [name, setName] = useState("");
  const [premium, setPremium] = useState(false);
  const dispatch = useAppDispatch();

  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const newUser: User = {
      name,
      premium,
    };
    dispatch(addUser(newUser));
    setName("");
  }

  return (
    <form
      onSubmit={handleSubmit}
      className="flex flex-col gap-2 p-4 border-2 border-gray-600 w-max"
    >
      //...
    </form>
  );
};

export default AddUser;

Here you can view the usage of useAppDispatch hook as well, which returns a dispatch for the redux state with which you can dispatch actions that we exported out from GlobalStateSlice.

Conclusion

Both the libraries are great and they have their own pros and cons.

While the setup of Redux may seem bulky, usage is pretty straight-forward and not at all complex.

The setup of a MobX class may require you to have some knowledge of its various constructs first, but here as well, its a smooth sail after that.

Personal Opinion

For Global State Management, Redux offers predictability, scalability, and a strong ecosystem, making it ideal for large, complex apps.

MobX focuses on simplicity and fine-grained reactivity, suiting smaller projects or teams prioritizing rapid development.

Choose Redux for structure and debugging. Pick MobX for flexibility and minimal boilerplate.

Hi, I am Sanjeet Tiwari... Let's talk about

Global State: MobX vs Redux

Example

Contents of my Global State

MobX

Setup

Usage

Redux

Setup

Usage

Conclusion

Personal Opinion

Hi, I am Sanjeet Tiwari...
Let's talk about