DOCSEARCHbyAlgolia
Submit Docs

Redux Documentation

website·Indexed 29 days ago

https://redux.js.org/

A predictable state container for JavaScript apps. Documentation covers core concepts, Redux Toolkit (RTK), RTK Query, and integration with React and Next.js. Includes guides on managing side effects with Redux Thunk and Redux-Saga, state normalization, memoized selectors via Reselect, and migration paths to Redux Toolkit 2.0.

Tokens
205.6K
Snippets
823
Records
1.2K
Agent score
74%

What's inside Redux

  1. Overview of React Redux features

    React Redux is the official React binding for Redux, maintained by the Redux team to ensure compatibility with the latest Redux and React APIs. It provides the following core benefits:

    • Predictability: Integrates with React's component model, allowing components to automatically update when the specific Redux state they depend on changes.
    • Encapsulation: Provides built-in APIs for components to interact with the Redux store, removing the need for developers to write manual store-interaction logic.
    • Optimization: Includes built-in performance optimizations to ensure components only re-render when their required data actually changes.

  2. Overview of Redux Toolkit features

    Redux Toolkit is designed to simplify Redux development by providing utilities for common tasks. Key features include:

    • Simplified Store Setup: Provides good defaults for store configuration out of the box.
    • Reducer Creation: Includes utilities to simplify creating reducers and automatically generating "slices" of state.
    • Immutable Update Logic: Uses inspiration from libraries like Immer to allow developers to write "mutative" code that is converted into safe immutable updates.
    • Built-in Addons: Includes the most commonly used Redux addons by default to reduce boilerplate and manual configuration.

  3. Overview of RTK Query

    RTK Query is an advanced data fetching and caching tool included as an addon in the @reduxjs/toolkit package. It is built on top of Redux Toolkit core, leveraging createSlice and createAsyncThunk to simplify loading data in web applications. It provides automated request de-duplication, caching, and invalidation.

  4. Overview of createEntityAdapter

    createEntityAdapter is a function that generates a set of prebuilt reducers and selectors for performing CRUD operations on a normalized state structure. This structure consists of an ids array (containing unique IDs) and an entities lookup table (mapping IDs to the actual data objects). These generated functions can be used as case reducers in createSlice or createReducer, or as mutating helper functions within them. Only plain JS objects and arrays should be stored in the state; class instances are not permitted.
    {
  ids: [], // Unique IDs of each item (strings or numbers)
  entities: {}
}

  5. Overview of Redux core capabilities

    Redux provides a predictable state management architecture that ensures applications behave consistently across different environments (client, server, and native). Key benefits include:

    • Centralized State: Centralizing state and logic enables features like undo/redo and state persistence.
    • Debuggability: Integration with Redux DevTools allows for time-travel debugging and tracing state changes (when, where, why, and how).
    • UI Flexibility: Redux is agnostic to the UI layer and supports a wide ecosystem of addons.

  6. Overview of Redux Toolkit autoBatchEnhancer

    The autoBatchEnhancer is a store enhancer that identifies 'low-priority' dispatched actions (those tagged with action.meta[SHOULD_AUTOBATCH] = true) and queues subscriber notifications on a delay.

    Notifications are triggered when either:

    1. The queued callback runs.
    2. A 'normal-priority' action (one without the batching tag) is dispatched, which triggers an immediate synchronous notification.

    This allows developers to opt-in to batching on a per-action basis, which is particularly useful for improving performance in RTK Query when rendering large lists of components.

  7. Overview of RTK Query

    RTK Query is an optional addon included in the Redux Toolkit package. It is a data fetching and caching tool designed to eliminate the need for hand-writing logic for loading states, avoiding duplicate requests, optimistic updates, and managing cache lifetimes. It is UI-agnostic but provides specialized integration for React via auto-generated hooks.

  8. Overview of Redux Toolkit core APIs

    Redux Toolkit provides several utilities to reduce boilerplate and simplify store configuration:

    • configureStore(): Simplifies store setup, includes redux-thunk by default, and enables Redux DevTools.
    • createReducer(): Uses a lookup table for actions and leverages Immer for simpler immutable updates.
    • createAction(): Generates an action creator for a given action type string.
    • createSlice(): Generates a slice reducer and corresponding action creators/types in one object.
    • combineSlices(): Combines multiple slices into a single reducer with support for lazy loading.
    • createAsyncThunk(): Handles promise-based async logic, automatically dispatching pending, fulfilled, and rejected actions.
    • createEntityAdapter(): Manages normalized data in the store with reusable reducers and selectors.
    • createSelector(): A re-export of the Reselect library for efficient state selection.

  9. Overview of RTK Query

    RTK Query is a data fetching and caching tool included in the Redux Toolkit package. It is designed to eliminate the need to hand-write data fetching and caching logic by automating common tasks such as tracking loading states, avoiding duplicate requests, managing cache lifetimes, and handling optimistic updates. It is recommended as the default approach for data fetching in Redux applications.

  10. Overview of Redux Toolkit (RTK) core APIs

    Redux Toolkit (RTK) is the standard approach for writing Redux applications. It wraps the Redux core and provides APIs to simplify common patterns, reducing the amount of boilerplate code required to manage state.

  11. Overview of Redux Toolkit features

    Redux Toolkit (RTK) is designed to simplify Redux development by providing utilities for common tasks and opinionated defaults. Key capabilities include:

    • Simplified Store Setup: Provides good defaults and built-in integration for the most commonly used Redux addons.
    • Simplified Reducer Logic: Includes utilities for creating reducers and managing state slices automatically.
    • Mutative Immutable Updates: Leverages libraries like Immer to allow developers to write code that looks like it is mutating state, while actually performing safe immutable updates.
    • Reduced Boilerplate: Aims to let developers focus on core application logic by reducing the amount of code required to implement Redux patterns.

  12. Overview of Redux Toolkit (RTK)

    Redux Toolkit (RTK) is the official recommended approach for writing Redux logic. It is provided by the @reduxjs/toolkit package, which wraps the core redux package. RTK is designed to simplify Redux tasks, eliminate repetitive boilerplate code, prevent common mistakes (such as accidental state mutation), and implement suggested best practices by default.