Redux.js vs vuex

Overview

Redux

Stacks32.0K

Followers23.6K

Votes674

vuex

Stacks1.7K

Followers926

Votes7

GitHub Stars28.4K

Forks9.6K

Redux vs vuex: What are the differences?

Redux: Predictable state container for JavaScript apps. Redux 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; vuex: Centralized State Management for Vue.js. Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. It also integrates with Vue's official devtools extension to provide advanced features such as zero-config time-travel debugging and state snapshot export / import.

Redux and vuex belong to "State Management Library" category of the tech stack.

Redux and vuex are both open source tools. Redux with 49.2K GitHub stars and 12.7K forks on GitHub appears to be more popular than vuex with 20.7K GitHub stars and 6.67K GitHub forks.

Zapier, Clever, and WebbyLab are some of the popular companies that use Redux, whereas vuex is used by Flat, Cromon Media Services, and Toucan Toco. Redux has a broader approval, being mentioned in 1021 company stacks & 803 developers stacks; compared to vuex, which is listed in 48 company stacks and 71 developer stacks.

Share your Stack

Help developers discover the tools you use. Get visibility for your team's tech choices and contribute to the community's knowledge.

View Docs

CLI (Node.js)

Manual

Advice on Redux, vuex

Engineer at Refi App

Apr 14, 2021

Decided

Why Electron over macOS

Since this is a very early stage, so I want to verify the hypothesis so that I go with Electron. It will help you build faster, cross-native app but the trade off is the performance. It's ok, if the app is get product-market fit, we will plan to move it to Native platform to bring high performance for users

Why Recoiljs over Redux or something else

Why not Redux? Zustan? DVA?

The boilderplace is so fukin hard. Besides, it really hard for optimizing to only render a component that subscribes to a sub-tree state. I need to use selector, memorize, immutable, ...

Why not MobX? MST?

It has been a long time since I last use Mobx, MST. It's cool, but now the world has changed a lot, no more Class component, so I don't know it supports a lot.
One more thing I don't want to use MobX is that the API is changed a lot in each major version. No! I don't want to use an outdated library for the rest of my life
I feel can not control how Component will render when I use MobX

Why Recoil?

It solves my concern, each component is subscribed to a very small state object (called atom) and only render once they changed
It plays nice with Functional Component. You can easily change useState to useRecoilState and vice versa. It's cool because "Alway use local state, only move it to global once needed"
I can map the product concept to state in my brain. A cell in a table should be an atom so that the cell will render on its own.

16.7k views16.7k

Comments

Detailed Comparison

Redux	vuex
It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. t provides a great experience, such as live code editing combined with a time traveling debugger.	Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. It also integrates with Vue's official devtools extension to provide advanced features such as zero-config time-travel debugging and state snapshot export / import.
Predictable state; Easy testing; Works with other view layers besides React	-
Statistics
GitHub Stars -	GitHub Stars 28.4K
GitHub Forks -	GitHub Forks 9.6K
Stacks 32.0K	Stacks 1.7K
Followers 23.6K	Followers 926
Votes 674	Votes 7
Pros & Cons
Pros 191 State is predictable 150 Plays well with React and others 126 State stored in a single object tree 79 Hot reloading out of the box 74 Allows for time travel Cons 13 Lots of boilerplate 6 Verbose 5 Steep learning curve 5 Design 4 Steeper learning curve than RxJs	Pros 2 Debugging 2 Zero-config time-travel 2 Centralized State Management 1 Easy to setup
Integrations
JavaScript React	Vue.js

What are some alternatives to Redux, vuex?

MobX

MobX is a battle tested library that makes state management simple and scalable by transparently applying functional reactive programming (TFRP). React and MobX together are a powerful combination. React renders the application state by providing mechanisms to translate it into a tree of renderable components. MobX provides the mechanism to store and update the application state that React then uses.

Zustand

Small, fast and scaleable bearbones state-management solution. Has a comfy api based on hooks, that isn't boilerplatey or opinionated, but still just enough to be explicit and flux-like.

Effector

It is an effective multi-store state manager for Javascript apps, that allows you to manage data in complex applications.

redux-saga

An alternative side effect model for Redux apps

redux-thunk

Redux Thunk middleware allows you to write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met. The inner function receives the store methods dispatch and getState as parameters.

Unstated

State so simple, it goes without saying

reselect

Simple “selector” library for Redux (and others) inspired by getters in NuclearJS, subscriptions in re-frame and this proposal from speedskater.

Redux Observable

It allows developers to dispatch a function that returns an observable, promise or iterable of action(s). Compose and cancel async actions to create side effects and more.

Recoiljs

It is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.

XState

It is a library for creating, interpreting, and executing finite state machines and statecharts. It's a really powerful package that can be used to manage state in React Apps.

Related Comparisons

Redux and vuex are both open source tools. Redux with 49.2K GitHub stars and 12.7K forks on GitHub appears to be more popular than vuex with 20.7K GitHub stars and 6.67K GitHub forks.

Redux.js vs vuex