redux vs mobx vs @ngrx/store vs @ngxs/store
State Management Libraries for JavaScript Applications Comparison
1 Year
reduxmobx@ngrx/store@ngxs/storeSimilar Packages:
What's State Management Libraries for JavaScript Applications?

State management libraries are essential tools in modern web development, particularly for applications with complex state interactions. They help manage the state of an application in a predictable manner, allowing developers to maintain a single source of truth for the application's data. These libraries facilitate the flow of data and the synchronization of UI components, improving maintainability and scalability. By leveraging these libraries, developers can create applications that are easier to debug, test, and extend, ensuring a smoother user experience and more efficient development process.

Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
redux11,647,68061,090290 kB39a year agoMIT
mobx1,828,01427,7454.33 MB67a month agoMIT
@ngrx/store760,6928,123636 kB60a month agoMIT
@ngxs/store114,3563,548479 kB383 months agoMIT
Feature Comparison: redux vs mobx vs @ngrx/store vs @ngxs/store

Design Principles

  • redux:

    Redux is built around the principles of a single source of truth, state immutability, and pure functions. It enforces a predictable state container that allows for time-travel debugging and easy testing, making it a solid choice for applications where predictability and maintainability are paramount.

  • mobx:

    MobX embraces a more flexible design principle, allowing for mutable state and automatic tracking of dependencies. This leads to less boilerplate code and a more natural way to manage state changes, making it easier to build applications that require fine-grained reactivity without the constraints of a unidirectional flow.

  • @ngrx/store:

    @ngrx/store follows a strict unidirectional data flow and emphasizes immutability, making it easier to track changes and debug applications. It leverages the power of RxJS for reactive programming, enabling developers to create highly responsive applications that react to state changes seamlessly.

  • @ngxs/store:

    @ngxs/store adopts a more simplified approach to state management, focusing on ease of use and developer experience. It allows for mutable state, which can be more intuitive for developers coming from traditional object-oriented programming backgrounds, while still providing a clear structure for managing state changes.

Learning Curve

  • redux:

    Redux has a moderate learning curve, particularly due to its concepts of actions, reducers, and middleware. While the core principles are straightforward, mastering the ecosystem and best practices can take time, especially for developers new to functional programming paradigms.

  • mobx:

    MobX is known for its low learning curve, as it allows developers to work with observable state in a more straightforward manner. Its focus on simplicity and minimal boilerplate makes it easy for newcomers to adopt and implement effectively in their projects.

  • @ngrx/store:

    The learning curve for @ngrx/store can be steep, especially for developers unfamiliar with RxJS and reactive programming concepts. Understanding the intricacies of actions, reducers, and effects requires a solid grasp of the Angular framework and its ecosystem.

  • @ngxs/store:

    @ngxs/store offers a gentler learning curve compared to NgRx, making it more accessible for developers new to state management. Its API is designed to be intuitive, allowing developers to quickly grasp the concepts of state management without extensive prior knowledge.

Performance

  • redux:

    Redux can handle performance well with proper optimization techniques, such as memoization and selective rendering. However, the complexity of managing state can lead to performance bottlenecks if not implemented correctly, especially in large applications with many components.

  • mobx:

    MobX excels in performance due to its fine-grained reactivity, allowing only the components that depend on changed state to re-render. This leads to efficient updates and a responsive user interface, making it a great choice for applications that require high performance and responsiveness.

  • @ngrx/store:

    @ngrx/store is optimized for performance in large applications, leveraging immutability and a strict unidirectional flow to minimize unnecessary re-renders. However, developers must be mindful of the complexity of change detection in Angular to maintain optimal performance.

  • @ngxs/store:

    @ngxs/store provides good performance for most applications, with a focus on simplicity and ease of use. Its mutable state approach can lead to performance benefits in smaller applications, but developers should be cautious of potential pitfalls in larger, more complex scenarios.

Extensibility

  • redux:

    Redux is known for its extensibility, with a rich ecosystem of middleware and libraries that can be easily integrated. Developers can create custom middleware to handle side effects, logging, and more, making it a versatile choice for complex applications.

  • mobx:

    MobX is inherently extensible, allowing developers to create custom decorators and utilities to enhance observability and state management. Its flexible design encourages experimentation and adaptation to fit specific project needs.

  • @ngrx/store:

    @ngrx/store is highly extensible, allowing developers to create custom middleware and plugins to enhance functionality. Its integration with Angular's dependency injection system also facilitates the development of reusable services and components.

  • @ngxs/store:

    @ngxs/store offers extensibility through its plugin system, enabling developers to add custom functionalities easily. Its straightforward architecture allows for quick adaptations and enhancements without significant overhead.

Community and Ecosystem

  • redux:

    Redux boasts one of the largest communities in the JavaScript ecosystem, with a wealth of resources, middleware, and libraries available. Its widespread adoption ensures that developers have access to extensive support and a variety of tools to enhance their applications.

  • mobx:

    MobX has a vibrant community and a variety of resources available, including documentation, tutorials, and third-party libraries. Its flexibility and ease of use have contributed to its popularity among developers looking for reactive state management solutions.

  • @ngrx/store:

    @ngrx/store has a strong community within the Angular ecosystem, with extensive documentation and resources available. Its integration with Angular's core features ensures ongoing support and updates, making it a reliable choice for Angular developers.

  • @ngxs/store:

    @ngxs/store is gaining traction within the Angular community, offering a growing ecosystem of plugins and resources. While it may not be as established as NgRx, it benefits from an active community that contributes to its development and support.

How to Choose: redux vs mobx vs @ngrx/store vs @ngxs/store
  • redux:

    Choose Redux if you are building applications with React or other frameworks and need a robust, predictable state management solution. Redux's middleware capabilities and extensive ecosystem make it ideal for handling complex asynchronous actions and side effects, especially in larger applications.

  • mobx:

    Opt for MobX if you prefer a more flexible and less boilerplate-heavy approach to state management. MobX allows for observable state and automatic dependency tracking, making it suitable for applications where performance and reactivity are critical. It is particularly beneficial for projects that require fine-grained reactivity without the complexity of a strict unidirectional flow.

  • @ngrx/store:

    Choose @ngrx/store if you are working within the Angular ecosystem and require a powerful, reactive state management solution that integrates seamlessly with Angular's features like RxJS. It is ideal for large applications that benefit from a strict unidirectional data flow and immutability.

  • @ngxs/store:

    Select @ngxs/store for a simpler and more intuitive state management approach in Angular applications. It offers a more straightforward API compared to NgRx, making it easier to learn and implement, especially for smaller projects or teams new to state management.

README for redux

Redux Logo

Redux is a predictable state container for JavaScript apps.

It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger.

You can use Redux together with React, or with any other view library. The Redux core is tiny (2kB, including dependencies), and has a rich ecosystem of addons.

Redux Toolkit is our official recommended approach for writing Redux logic. It wraps around the Redux core, and contains packages and functions that we think are essential for building a Redux app. Redux Toolkit builds in our suggested best practices, simplifies most Redux tasks, prevents common mistakes, and makes it easier to write Redux applications.

GitHub Workflow Status npm version npm downloads redux channel on discord

Installation

Create a React Redux App

The recommended way to start new apps with React and Redux Toolkit is by using our official Redux Toolkit + TS template for Vite, or by creating a new Next.js project using Next's with-redux template.

Both of these already have Redux Toolkit and React-Redux configured appropriately for that build tool, and come with a small example app that demonstrates how to use several of Redux Toolkit's features.

# Vite with our Redux+TS template
# (using the `degit` tool to clone and extract the template)
npx degit reduxjs/redux-templates/packages/vite-template-redux my-app

# Next.js using the `with-redux` template
npx create-next-app --example with-redux my-app

We do not currently have official React Native templates, but recommend these templates for standard React Native and for Expo:

  • https://github.com/rahsheen/react-native-template-redux-typescript
  • https://github.com/rahsheen/expo-template-redux-typescript
npm install @reduxjs/toolkit react-redux

For the Redux core library by itself:

npm install redux

For more details, see the Installation docs page.

Documentation

The Redux core docs are located at https://redux.js.org, and include the full Redux tutorials, as well usage guides on general Redux patterns:

The Redux Toolkit docs are available at https://redux-toolkit.js.org, including API references and usage guides for all of the APIs included in Redux Toolkit.

Learn Redux

Redux Essentials Tutorial

The Redux Essentials tutorial is a "top-down" tutorial that teaches "how to use Redux the right way", using our latest recommended APIs and best practices. We recommend starting there.

Redux Fundamentals Tutorial

The Redux Fundamentals tutorial is a "bottom-up" tutorial that teaches "how Redux works" from first principles and without any abstractions, and why standard Redux usage patterns exist.

Help and Discussion

The #redux channel of the Reactiflux Discord community is our official resource for all questions related to learning and using Redux. Reactiflux is a great place to hang out, ask questions, and learn - please come and join us there!

Before Proceeding Further

Redux is a valuable tool for organizing your state, but you should also consider whether it's appropriate for your situation. Please don't use Redux just because someone said you should - instead, please take some time to understand the potential benefits and tradeoffs of using it.

Here are some suggestions on when it makes sense to use Redux:

  • You have reasonable amounts of data changing over time
  • You need a single source of truth for your state
  • You find that keeping all your state in a top-level component is no longer sufficient

Yes, these guidelines are subjective and vague, but this is for a good reason. The point at which you should integrate Redux into your application is different for every user and different for every application.

For more thoughts on how Redux is meant to be used, please see:

Basic Example

The whole global state of your app is stored in an object tree inside a single store. The only way to change the state tree is to create an action, an object describing what happened, and dispatch it to the store. To specify how state gets updated in response to an action, you write pure reducer functions that calculate a new state based on the old state and the action.

Redux Toolkit simplifies the process of writing Redux logic and setting up the store. With Redux Toolkit, the basic app logic looks like:

import { createSlice, configureStore } from '@reduxjs/toolkit'

const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0
  },
  reducers: {
    incremented: state => {
      // Redux Toolkit allows us to write "mutating" logic in reducers. It
      // doesn't actually mutate the state because it uses the Immer library,
      // which detects changes to a "draft state" and produces a brand new
      // immutable state based off those changes
      state.value += 1
    },
    decremented: state => {
      state.value -= 1
    }
  }
})

export const { incremented, decremented } = counterSlice.actions

const store = configureStore({
  reducer: counterSlice.reducer
})

// Can still subscribe to the store
store.subscribe(() => console.log(store.getState()))

// Still pass action objects to `dispatch`, but they're created for us
store.dispatch(incremented())
// {value: 1}
store.dispatch(incremented())
// {value: 2}
store.dispatch(decremented())
// {value: 1}

Redux Toolkit allows us to write shorter logic that's easier to read, while still following the original core Redux behavior and data flow.

Logo

You can find the official logo on GitHub.

Change Log

This project adheres to Semantic Versioning. Every release, along with the migration instructions, is documented on the GitHub Releases page.

License

MIT