DOCSEARCHbyAlgolia
Submit Docs

Redux Documentation

website·Indexed 30 days ago

https://ko.redux.js.org

A predictable state container for JavaScript apps. This documentation covers core concepts including state, actions, and reducers, as well as the officially recommended Redux Toolkit (RTK) for simplifying store configuration and logic. It provides guides on middleware, thunks, server rendering, and integration with React using hooks like useSelector and useDispatch.

Tokens
97.3K
Snippets
374
Records
591
Agent score
65%

What's inside Redux

  1. Overview of Redux Top-Level API Exports

    Redux provides a small set of helper functions to implement state management conventions. The primary top-level exports are:

    • createStore(reducer, [preloadedState]): Creates a Redux store.
    • combineReducers(reducers): Turns an object whose values are reducer functions into a single reducer function.
    • applyMiddleware(...middlewares): Creates store enhancer which adds middleware capabilities to the store.
    • bindActionCreators(actionCreators, dispatch): Wraps action creators in a dispatch call.
    • compose(...functions): Composes multiple functions from right to left.

  2. Overview of Redux Toolkit

    Redux Toolkit (RTK) is the official, opinionated toolset for efficient Redux development. It is designed to be the standard way to write Redux logic, aiming to solve common pain points such as complex store setup, the need for multiple additional packages, and excessive boilerplate code. It provides a set of utilities for store configuration, reducer definition, immutable updates, and async logic, and is strongly recommended for all Redux applications.

  3. Overview of RTK Query

    RTK Query is an optional addon included in the Redux Toolkit package designed to simplify data fetching and caching in web applications. It eliminates the need to hand-write manual logic for tracking loading states, avoiding duplicate requests, implementing optimistic updates, and managing cache lifetimes. It is built on top of createSlice and createAsyncThunk, making it UI-agnostic, though it provides specialized React hooks for easier integration.

  4. Overview of Redux Toolkit (RTK)

    Redux Toolkit (RTK) is the officially recommended approach for writing Redux logic. It is provided via the @reduxjs/toolkit package, which wraps the core redux package and includes essential API methods and common dependencies. RTK simplifies store configuration, reducer creation, and state slice management, reducing the boilerplate code and common errors (such as accidental state mutation) associated with legacy Redux.

  5. Overview of the Redux Store API

    The Redux Store object provides the following methods for interacting with the application state:

    • getState(): Returns the current state of the store.
    • dispatch(action): Dispatches an action to trigger a state change.
    • subscribe(listener): Registers a listener function that will be called whenever the state changes.
    • replaceReducer(nextReducer): Replaces the reducer currently used by the store to calculate the state.

  6. Overview of Redux Toolkit (RTK) core APIs

    Redux Toolkit (RTK) is the standard approach for writing Redux logic. It wraps the Redux core and provides several APIs to reduce boilerplate and simplify state management:

    • configureStore: Sets up a Redux store with sensible defaults, automatically combining slice reducers into a root reducer and enabling the Redux DevTools Extension and debugging middleware.
    • createSlice: Simplifies the creation of actions and reducers. It automatically generates action creators based on the slice/reducer names and allows reducers to appear to 'mutate' state using Immer under the hood.
    • createAsyncThunk: Handles asynchronous logic by generating a thunk and corresponding pending, fulfilled, and rejected action creators. These actions are typically handled within a slice's extraReducers.
    • createEntityAdapter: Provides a set of reducers and memoized selectors (selectAll, selectById) specifically for managing normalized state, including built-in functions for adding, updating, and removing items.

  7. Overview of Redux Toolkit (RTK) utility APIs

    Redux Toolkit provides several optional APIs designed to handle common Redux tasks and reduce boilerplate:

    • createAsyncThunk: Standardizes the pattern of dispatching actions before and after asynchronous requests.
    • createEntityAdapter: Provides pre-built reducers and selectors for performing CRUD operations on normalized state.
    • createSelector: Re-exports the standard Reselect API for creating memoized selectors.
    • createListenerMiddleware: A side-effect middleware used to execute logic in response to dispatched actions.
    • RTK Query (via @reduxjs/toolkit/query): A complete solution for data fetching and caching. It generates reducers, middleware, and React hooks (e.g., useGetPokemonQuery) to manage loading states and cache results from REST or GraphQL endpoints.

  8. Overview of the Redux Store

    The Store is an object that holds the entire state tree of your application. It is not a class, but a plain object containing a few methods. The only way to change the state inside the store is to dispatch actions to it. A store is created by passing a root reducing function to createStore.

  9. Use Redux Thunk for asynchronous logic

    Redux Thunk is the official implementation of the 'async function middleware' pattern. It allows you to dispatch functions (called 'thunks') instead of plain action objects. These thunk functions receive dispatch and getState as arguments, enabling them to perform asynchronous operations (like API calls) and dispatch real action objects once the async work is complete.

  10. Understand the role of React-Redux

    Redux is a standalone library independent of any UI framework. When using Redux with React, the official UI binding library is react-redux. It handles the store interaction logic—such as subscribing to the store, checking for updated data, and triggering re-renders—which avoids repetitive manual subscription code and implements complex performance optimizations.

  11. Understand the motivation for using Redux in complex applications

    Redux is designed to address the difficulty of managing state in complex JavaScript single-page applications. State includes server responses, cached data, locally generated data not yet saved to a server, and UI states (e.g., active routes, selected tabs, loading indicators, pagination).

    Without a structured approach, state management becomes unpredictable when multiple models and views update each other, making it hard to track when, why, and how state changes. This unpredictability is exacerbated by combining mutation and asynchronicity. Redux solves this by imposing constraints on how state changes occur, drawing inspiration from Flux, CQRS, and Event Sourcing to make state transitions predictable.

  12. Understand Redux's relationship with Flux

    Redux is inspired by Flux and shares the concept of focusing model update logic in a specific layer (Flux's 'stores' vs Redux's 'reducers') and using plain objects called 'actions' to describe data changes. However, Redux differs in two key ways:

    1. No Dispatcher: Redux relies on pure functions rather than an event emitter (dispatcher), making it easier to compose.
    2. Immutability: Redux assumes state is never mutated. Reducers must always return a new state object rather than modifying the existing one. Mutating state in a reducer breaks developer tools like time-travel debugging, record/replay, and hot reloading.