NPM Star
Collections
  1. Home
  2. Compare
  3. react-redux vs redux-toolkit
NPM Compare

Compare NPM packages statistics, trends, and features

CollectionsVS Code extensionChrome extensionTermsPrivacyLinkTreeIndiehackersBig Frontendqiuyumi

React-Redux vs Redux Toolkit: State Management Solutions

React-Redux is the official package that helps React applications connect with Redux state management. Redux Toolkit is a newer, more user-friendly package that simplifies Redux development by including useful tools and reducing boilerplate code. While React-Redux focuses on connecting React and Redux, Redux Toolkit provides a complete solution with built-in best practices and helper functions.

State Managementreduxreactstate-managementstorehooks

Detailed Comparison

Technical Analysis

featureComparison

React-Redux is a state management library that connects React components to a Redux store. Redux Toolkit is a set of tools for building Redux applications, including a simplified store setup, action creators, and reducers. Redux Toolkit is built on top of React-Redux.

typescriptSupport

Both packages have excellent TypeScript support, with type definitions included in the package.

browserCompatibility

Both packages are compatible with modern browsers, including Chrome, Firefox, Safari, and Edge.

dependencies

React-Redux depends on React and Redux, while Redux Toolkit depends on Redux and has optional dependencies on React and React-Redux.

performance

Both packages have good performance characteristics, with efficient state management and minimal overhead.

Ecosystem Analysis

frameworkCompatibility

Both packages are compatible with React and other popular front-end frameworks.

communityActivity

Both packages have active communities, with frequent updates and contributions.

documentationQuality

Both packages have high-quality documentation, with clear guides and examples.

maintenanceStatus

Both packages are actively maintained, with regular updates and bug fixes.

Performance Comparison

bundleSizeAnalysis

Redux Toolkit has a slightly larger bundle size than React-Redux, but both are relatively small.

runtimePerformance

Both packages have similar runtime performance, with efficient state management and minimal overhead.

loadingTime

Both packages have similar loading times, with React-Redux being slightly faster.

memoryUsage

Both packages have similar memory usage, with Redux Toolkit using slightly more memory.

Code Examples

Basic React-Redux Example

1import React from 'react';
2import { connect } from 'react-redux';
3
4const Counter = ({ count, increment }) => {
5  return (
6    <div>
7      <p>Count: {count}</p>
8      <button onClick={increment}>Increment</button>
9    </div>
10  );
11};
12
13const mapStateToProps = state => ({ count: state.count });
14const mapDispatchToProps = dispatch => ({ increment: () => dispatch({ type: 'INCREMENT' }) });
15
16export default connect(mapStateToProps, mapDispatchToProps)(Counter);

This example shows a basic React component connected to a Redux store using React-Redux.

Basic Redux Toolkit Example

1import { createSlice, configureStore } from '@reduxjs/toolkit';
2
3const counterSlice = createSlice({
4  name: 'counter',
5  initialState: 0,
6  reducers: {
7    increment: state => state + 1,
8  },
9});
10
11const store = configureStore({
12  reducer: counterSlice.reducer,
13});
14
15export default store;

This example shows a basic Redux store setup using Redux Toolkit, with a single reducer and action creator.

Recommendation

Summary

Both packages are well-established and widely used in the React ecosystem. React-Redux is a more traditional state management library, while Redux Toolkit provides a more modern and streamlined approach.

Details

  • React-Redux is a more mature library with a larger community.
  • Redux Toolkit provides a simpler and more efficient way to manage state.

Similar Packages

zustand

90%

A tiny state management solution that uses hooks. It's much simpler than Redux and requires way less code to get started. Perfect for small to medium React applications.

It's a great alternative because it's easier to learn than Redux, has zero dependencies, and doesn't need any wrapping Provider components. You can start using it in minutes without complex setup.

State Management

recoil

85%

Facebook's own state management library that works with atoms (small pieces of state) and selectors. It's built specifically for React and handles complex state requirements really well.

Created by Facebook (like React), it's great for large applications that need to manage lots of data. It's especially good at handling derived state and async data.

State Management

jotai

80%

A state management tool that breaks down your state into small atomic pieces. It's like Lego blocks for your app's data, where you can combine small pieces to build bigger things.

It's perfect for those who find Redux too complicated. It works great with React's concurrent features and has a very simple API that feels natural with React hooks.

State Management

mobx

75%

A battle-tested library that makes state management simple and scalable. It uses observable patterns to automatically track and update your app's state.

It's simpler than Redux but just as powerful. Changes to state are automatically reflected in your app without manual updates, which means less code to write and maintain.

State Management

React Redux

Official React bindings for Redux. Performant and flexible.

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 is by using our official Redux+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

An Existing React App

React Redux 8.0 requires React 16.8.3 or later (or React Native 0.59 or later).

To use React Redux with your React app, install it as a dependency:

# If you use npm: npm install react-redux # Or if you use Yarn: yarn add react-redux

You'll also need to install Redux and set up a Redux store in your app.

This assumes that you’re using npm package manager with a module bundler like Webpack or Browserify to consume CommonJS modules.

If you don’t yet use npm or a modern module bundler, and would rather prefer a single-file UMD build that makes ReactRedux available as a global object, you can grab a pre-built version from cdnjs. We don’t recommend this approach for any serious application, as most of the libraries complementary to Redux are only available on npm.

Documentation

The React Redux docs are published at https://react-redux.js.org .

How Does It Work?

The post The History and Implementation of React-Redux explains what it does, how it works, and how the API and implementation have evolved over time.

There's also a Deep Dive into React-Redux talk that covers some of the same material at a higher level.

License

MIT

redux-toolkit

introduction

提供实用的工具函数,改善使用redux的开发体验,提供代码可读性。

  • createReducer a functional way to write reducer
  • createAction a simple way to write action
  • debugMiddleware a useful debug middleware

installation

mnpm install redux-toolkit

Usage

import { createAction, createReducer, debugMiddleware } from 'redux-toolkit'

createReducer

避免使用switch碰到的问题:

  • 不用担心各个case下的变量冲突问题
  • 可以解构action 和 state
  • 使用箭头函数
  • 当swtich case 过多时,object 的速度会比 switch 更快
  • 不再会被 break 和 default 恶心

下面是一个简单的reducer例子

import { ADD_TODO, DELETE_TODO, EDIT_TODO, COMPLETE_TODO, COMPLETE_ALL, CLEAR_COMPLETED } from '../constants/ActionTypes';

const initialState = [{
  text: 'Use Redux',
  completed: false,
  id: 0
}];

export default createReducer({
  [ADD_TODO]: (state, { text }) => [{
    id: state.reduce((maxId, todo) => Math.max(todo.id, maxId), -1) + 1,
    completed: false,
    text
  }, ...state],

  [DELETE_TODO]: (state, { id }) => state.filter(todo =>
    todo.id !== action.id
  ),

  [EDIT_TODO]: (state, { id, text }) => state.map(todo =>
    todo.id === id ?
      Object.assign({}, todo, { text }) :
      todo
  ),

  [COMPLETE_ALL]: state => {
    const areAllMarked = state.every(todo => todo.completed);
    return state.map(todo => Object.assign({}, todo, {
      completed: !areAllMarked
    }));
  },

  [CLEAR_COMPLETED]: state => state.filter(todo => todo.completed === false)
}, initialState)

createAction

提供更简单的方法去创建actionCreator。下面是通过actionCreator和普通方法进行对比。

创建没有payload的action

createAction('showAll');

function() {
  return {
    type: 'showAll'
  }
}

只有一个携带值

当只有一个需要传递给reducer的值时,接受一个key。

createAction('add', 'value');

function(value) {
  return {
    type: 'add',
    payload: {
      value: value
    }
  };
}

传递多个值

接受一个keys数组,会将参数按顺序放置在action的payload属性中。

createAction('add', ['num1', 'num2']);

function (num1, num2) {
  return {
    type: 'add',
    payload: {
      num1: num1,
      num2: num2  
    }
  };
}

根据函数创建action

接受一个将参数处理为payload的函数

createAction('add', (num1, num2) => {
  number1: num1,
  number2: num2,
  other: num1 * num2
})

function (num1, num2) {
  var getAction = (num1, num2) => {
    number1: num1,
    number2: num2,
    other: num1 * num2
  };
  return {
    type: 'add',
    payload: getAction(num1, num2)
  };
}

debugMiddleware

提供一个debug的middleware

features

  • if dispatched action don't match FSA rules, will throw Error
  • print the info of actions
  • print the old state after action dispatched
StarsIssuesVersionUpdatedⓘLast publish dateCreatedⓘPackage creation dateSizeⓘMinified + Gzipped size
R
react-redux
23,495309.2.08 months ago10 years agoinstall size 4.1 KB
R
redux-toolkit
201.1.23 years ago10 years agoinstall size 3.6 KB

Dependencies Comparison

react-redux

Dependencies

@types/use-sync-external-store^0.0.6
use-sync-external-store^1.4.0

Dev Dependencies

@microsoft/api-extractor^7.47.0
@reduxjs/toolkit^2.2.5
@testing-library/dom^10.4.0
@testing-library/jest-dom^6.6.3
@testing-library/react^16.1.0
@types/node^20.14.2
@types/prop-types^15.7.12
@types/react^19.0.1
@types/react-dom^19.0.1
codecov^3.8.3
cross-env^7.0.3
eslint^8.57.0
eslint-config-prettier^9.1.0
eslint-import-resolver-typescript^3.6.1
eslint-plugin-import^2.29.1
eslint-plugin-prettier^5.1.3
eslint-plugin-react^7.34.2
jsdom^25.0.1
prettier^3.3.3
react^19.0.0
react-dom^19.0.0
redux^5.0.1
rimraf^5.0.7
tsup^8.3.5
typescript^5.5.4
typescript-eslint^7.12.0
vitest^1.6.0

Peer Dependencies

@types/react^18.2.25 || ^19
react^18.0 || ^19
redux^5.0.0

redux-toolkit

Dependencies

debug^2.2.0
flux-standard-action^0.6.0
invariant^2.1.1
lodash^3.10.1

Dev Dependencies

Peer Dependencies

Who's Using These Packages

react-redux

jitsi-meet
jitsi-meet

Jitsi Meet - Secure, Simple and Scalable Video Conferences that you use as a standalone app or embed in your web application.

generator-jhipster
generator-jhipster

JHipster is a development platform to quickly generate, develop, & deploy modern web applications & microservice architectures.

Magick
Magick

Magick is a cutting-edge toolkit for a new kind of AI builder. Make Magick with us!

personal-blog
personal-blog

✍️ 个人技术博客

baker
baker

Mobile MVP Toolkit

redux-toolkit

redux-toolkit
redux-toolkit

The official, opinionated, batteries-included toolset for efficient Redux development

interface
interface

🦄 Open source interfaces for the Uniswap protocol

StudyNotion
StudyNotion

A fully fledged working edtech website using mern stack.

Soombook
Soombook
tap-and-travel-user-frontend
tap-and-travel-user-frontend