Overview

Redux Toolkit, officially known as @reduxjs/toolkit, is a package designed to simplify and standardize Redux development. Introduced in 2019, it addresses common pain points associated with traditional Redux setups, such as excessive boilerplate code and the need for multiple packages to implement best practices. Redux Toolkit provides a set of utilities that streamline the process of writing Redux logic, including store setup, reducer creation, and immutable update patterns.

The library is particularly well-suited for developers building single-page applications with React, Vue, or Angular, where predictable state management is crucial for maintaining application consistency and debugging. It integrates several key libraries and patterns, such as Immer for immutable state updates and Redux Thunk for asynchronous logic, directly into its API. This integration means developers can write less code and focus more on application features rather than the intricacies of Redux configuration.

For new projects, Redux Toolkit offers a streamlined path to setting up a Redux store with sensible defaults. For existing Redux applications, it provides tools for refactoring and modernizing codebases, making them more maintainable and easier to extend. Its opinionated approach guides developers towards proven patterns, which can be especially beneficial for teams and larger projects where consistency is a priority. The official documentation offers a comprehensive introduction to Redux Toolkit's features and usage patterns.

Redux Toolkit's design principles prioritize developer experience. By abstracting away complex configurations and providing helper functions, it reduces the mental overhead of managing application state. This makes Redux more accessible to developers who might be new to the ecosystem, while still offering the power and flexibility required by experienced practitioners. Its strong support for TypeScript also makes it a preferred choice for projects aiming for type safety and improved code quality.

Key features

• configureStore: Simplifies store setup with good defaults, including Redux Thunk and Redux DevTools Extension integration, without manual configuration.
• createReducer: Allows writing reducers using mutable logic inside a "draft" state, which Immer then translates into immutable updates automatically, reducing boilerplate.
• createAction: Generates action creators with a minimal API, eliminating the need to manually define action types and their corresponding creators.
• createSlice: Combines createReducer and createAction into a single API that automatically generates action types, action creators, and a reducer for a given slice of state. This is a core feature for reducing boilerplate.
• createAsyncThunk: Simplifies the process of handling asynchronous logic (e.g., API calls) by dispatching actions based on the promise lifecycle (pending, fulfilled, rejected).
• createEntityAdapter: Provides a standardized way to manage normalized state for collections of data, offering pre-built reducers and selectors for common CRUD operations.
• TypeScript Support: Designed with TypeScript in mind, offering strong type inference and safety for Redux logic, which is detailed in the Redux Toolkit TypeScript usage guide.

Pricing

As of May 4, 2026, Redux Toolkit is entirely free and open-source. It is distributed under the MIT License.

Common integrations

• React: Frequently used with React applications for state management, leveraging the react-redux library for connecting components to the Redux store.
• React Native: Applicable for mobile application development with React Native, providing consistent state management across platforms.
• Redux DevTools Extension: Automatically integrated with configureStore for enhanced debugging capabilities, allowing developers to inspect state changes and action dispatches.
• Immer: Built-in for immutable updates, allowing developers to write mutating logic that is safely translated into immutable state changes.
• Redux Thunk: Included by default with configureStore for handling asynchronous logic and side effects, enabling dispatching functions instead of plain actions.
• Reselect: Often used alongside Redux Toolkit to create memoized selector functions, which can improve performance by preventing unnecessary re-renders in connected components.

Alternatives

• Zustand: A minimalistic, fast, and scalable state-management solution using hooks.
• Jotai: A primitive and flexible state management library for React, based on atomic state management.
• Recoil: An experimental state management library for React apps, providing a graph-based approach to state.
• Vue's Reactivity System: For Vue.js applications, the built-in reactivity system often suffices for managing component and application state.
• Angular's Component State: Angular applications often manage state directly within components or services, leveraging RxJS for observable patterns.

Getting started

To get started with Redux Toolkit, you typically install it via npm or yarn and then set up your store and create a slice. The following example demonstrates a basic counter application setup.

First, install the necessary packages:

npm install @reduxjs/toolkit react-redux
# or
yarn add @reduxjs/toolkit react-redux

Next, create a "slice" for your counter state. A slice is a collection of reducer logic and actions for a single feature in your app.

// src/features/counter/counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (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;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;

export default counterSlice.reducer;

Then, configure your Redux store using configureStore:

// src/app/store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

Finally, provide the store to your React application using the Provider component from react-redux:

// src/index.js (or App.js)
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { store } from './app/store';
import { Provider } from 'react-redux';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  
    
      
    
  
);

Now, you can use the Redux state in your React components:

// src/App.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, incrementByAmount } from './features/counter/counterSlice';

function App() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    

      
Counter: {count}
       dispatch(increment())}>Increment
       dispatch(decrement())}>Decrement
       dispatch(incrementByAmount(5))}>Increment by 5
    
  );
}

export default App;