redux vs mobx vs flux | State Management Libraries Comparison

Package	Downloads	Stars	Size	Issues	Publish	License

redux	14,478,108	61,331	290 kB	45	2 years ago	MIT
mobx	2,005,752	28,032	4.33 MB	78	6 months ago	MIT
flux	849,188	17,510	260 kB	6	2 years ago	BSD-3-Clause

State Management Approach

redux:
redux also follows a unidirectional data flow model but enforces a stricter structure with a single store, actions, and reducers. This makes state changes predictable and easier to track, especially in large applications.
mobx:
mobx takes a more reactive approach to state management, using observables to automatically track changes and update the UI. This allows for more dynamic and efficient state updates without the need for explicit actions or reducers.
flux:
flux uses a unidirectional data flow model, where data flows in one direction, making it easier to understand and debug state changes. It consists of actions, stores, and a dispatcher, allowing for a clear separation of concerns.

Boilerplate Code

redux:
redux is known for its boilerplate, especially when defining actions, reducers, and the store. However, tools like Redux Toolkit have been introduced to reduce boilerplate and simplify the setup process.
mobx:
mobx has minimal boilerplate compared to redux and flux, as it leverages decorators and observables to manage state. This makes it quicker to implement and easier to maintain.
flux:
flux requires some boilerplate code to set up actions, stores, and the dispatcher, but it is flexible and allows for customization based on the application's needs.

Reactivity

redux:
redux also lacks built-in reactivity, but libraries like react-redux provide hooks and higher-order components to connect components to the store and re-render them on state changes.
mobx:
mobx excels in reactivity, automatically updating the UI when observable state changes. This leads to more efficient and less error-prone updates, as components only re-render when the specific data they depend on changes.
flux:
flux does not provide built-in reactivity; updates to the UI must be handled manually by subscribing to store changes.

Ecosystem and Community

redux:
redux has a large and active ecosystem, with numerous middleware, dev tools, and libraries built around it. This makes it a well-supported choice for state management in JavaScript applications.
mobx:
mobx has a growing community and ecosystem, particularly among developers who prefer reactive programming. It may not be as large as redux, but it is well-supported and documented.
flux:
flux has a smaller ecosystem compared to redux, as it is more of a design pattern than a fully-fledged library. However, it has influenced many other state management solutions.

Ease of Use: Code Examples

redux:

redux example

import { createStore } from 'redux';

// Action
const addTodo = (text) => ({ type: 'ADD_TODO', text });

// Reducer
const todoReducer = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, { text: action.text }];
    default:
      return state;
  }
};

// Store
const store = createStore(todoReducer);

// Component
const TodoList = () => {
  const todos = store.getState();
  return <ul>{todos.map((todo) => <li>{todo.text}</li>)}</ul>;
};

mobx:

mobx example

import { observable, action } from 'mobx';
import { observer } from 'mobx-react';

// Store
class TodoStore {
  @observable todos = [];

  @action addTodo(text) {
    this.todos.push({ text });
  }
}

const todoStore = new TodoStore();

// Component
const TodoList = observer(() => {
  return <ul>{todoStore.todos.map((todo) => <li>{todo.text}</li>)}</ul>;
});

flux:

flux example

// Action
const addTodo = (text) => ({ type: 'ADD_TODO', text });

// Store
class TodoStore {
  constructor() {
    this.todos = [];
    this.listeners = [];
  }

  addTodo(todo) {
    this.todos.push(todo);
    this.notify();
  }

  notify() {
    this.listeners.forEach((listener) => listener());
  }

  subscribe(listener) {
    this.listeners.push(listener);
  }
}

const todoStore = new TodoStore();

// Component
const TodoList = () => {
  const [todos, setTodos] = useState(todoStore.todos);

  useEffect(() => {
    const listener = () => setTodos(todoStore.todos);
    todoStore.subscribe(listener);
  }, []);

  return <ul>{todos.map((todo) => <li>{todo.text}</li>)}</ul>;
};