DOCSEARCHbyAlgolia
Submit Docs

Redux

repository·master·Indexed 13 days ago

https://github.com/reduxjs/redux

A predictable and maintainable global state management library for JavaScript applications (version 5.0.1). It provides a consistent way to manage state across client, server, and native environments using a Store, Actions, and Reducers. Redux is designed to work with any view library, such as React, and is often used with Redux Toolkit for simplified development via createSlice and configureStore.

Tokens
181.7K
Snippets
425
Records
685
Agent score
95%

What's inside Redux

  1. What is Redux Toolkit and why use it?

    master

    Redux Toolkit is the official, opinionated, batteries-included toolset for efficient Redux development. It is intended to be the standard way to write Redux logic and is recommended for all Redux applications, whether you are starting a new project or incrementally migrating an existing one.

    It addresses three common Redux concerns:

    • Simplifying Redux store configuration.
    • Reducing the need to add multiple extra packages to make Redux useful.
    • Reducing the amount of boilerplate code required.

  2. Use Higher-Level Redux Abstractions

    master

    If you want to reduce boilerplate or use a more structured framework, consider these abstractions:

    • kea: An abstraction over Redux, Redux-Saga, and Reselect that provides a framework for actions, reducers, selectors, and sagas.
    • redux-scc: Uses 'behaviors' to create actions, reducer responses, and selectors from a defined structure.
    • redux-tiles: A minimal abstraction for easy composability, async requests, and testability.

  3. Explore Redux core concepts and learning resources

    master

    To get started with Redux, you can follow these primary documentation paths:

    • Core Concepts: Understand the fundamental principles of Redux (Store, Actions, Reducers).
    • Learning Resources: Access tutorials, guides, and community materials.
    • Ecosystem: Learn about the surrounding libraries like Redux Toolkit, React Redux, and Redux Thunk.
    • Examples: Browse real-world implementations and sample projects to see Redux in action.

  4. Explore Redux DevTools and Debuggers

    master

    Redux has a rich ecosystem of debugging tools to inspect state and perform time-travel debugging.

    Primary Debuggers:

    • reduxjs/redux-devtools: The original implementation for in-app state display and time-travel.
    • zalmoxisus/redux-devtools-extension: A browser extension that bundles multiple monitor views and integrates with browser dev tools.
    • infinitered/reactotron: A cross-platform Electron app for inspecting React/React Native apps (state, API requests, performance, errors, sagas, and action dispatching).

  5. Advanced RTK Query Patterns Overview

    master

    This guide covers advanced patterns for using RTK Query to manage data fetching and caching. Key advanced capabilities include:

    • Cache Invalidation with Tags: Using specific IDs with tags to manage granular cache invalidation and automatic refetching.
    • Non-React Cache Access: Interacting with the RTK Query cache outside of the React component lifecycle.
    • Response Data Manipulation: Techniques for transforming or manipulating data received from the server.
    • Optimistic and Streaming Updates: Implementing UI updates that assume success (optimistic) or handle real-time data streams.

  6. Use DevTools Monitors for State Inspection

    master

    Various monitors can be used with Redux DevTools to visualize state changes in different ways:

    • Log Monitor: Default tree view monitor.
    • Dock Monitor: A resizable and movable dock for monitors.
    • Slider Monitor: Replay recorded Redux actions using a slider.
    • Diff Monitor: Diffs Redux store mutations between actions.
    • Filterable Log Monitor: A filterable tree view.
    • Filter Actions: A composable monitor with action filtering capabilities.

  7. Master reducer concepts and techniques

    master

    As Redux applications grow, managing reducer complexity is essential. The following topics cover the advanced patterns and techniques used to structure reducer logic, handle real-world data, and optimize performance:

    • Basic Reducer Structure: The fundamental way to write a reducer.
    • Splitting Reducer Logic: How to break down large reducers.
    • Using combineReducers: The standard way to manage multiple reducers in a single store.
    • Beyond combineReducers: Advanced ways to compose reducer logic.
    • Normalizing State Shape: Organizing state to avoid redundancy and improve update efficiency.
    • Updating Normalized Data: How to handle updates when using a normalized state.
    • Reusing Reducer Logic: Patterns for sharing logic across different parts of the state.
    • Immutable Update Patterns: Techniques for ensuring state is updated immutably.
    • Initializing State: How to set up the initial values for your state tree.

  8. Redux Libraries and Tools

    master

    Redux is a small standalone JavaScript library, but it is typically used alongside these essential packages:

    • Redux Toolkit: The recommended approach for writing Redux logic. It simplifies tasks, prevents common mistakes, and implements best practices.
    • React-Redux: The official package for integrating Redux with React. It allows React components to read state from the Redux store and dispatch actions.
    • Redux DevTools Extension: A browser extension used to view the history of state changes, enabling effective debugging and "time-travel debugging."

  9. Test Redux Logic with Specialized Testkits

    master

    Several libraries simplify testing reducers, actions, and sagas:

    • redux-mock-store: A mock store that saves dispatched actions in an array for assertions.
    • redux-test-belt: Extends the store API to ease assertion, isolation, and manipulation.
    • redux-test-recorder: Automatically generates reducer tests based on app actions.
    • redux-testkit: A complete, opinionated testkit for reducers, selectors, actions, and thunks.
    • redux-saga-test-plan: Specifically designed for integration and unit testing of sagas.

  10. Implement Logging and Mutation Detection Middleware

    master

    You can use middleware to log actions or detect accidental state mutations during development.

    Logging Middleware:

    • redux-logger: Shows actions, states, and diffs.
    • redux-state-history: Provides time-travel and action recording (import/export/playback).
    • redux-vcr: Records and replays user sessions in real-time.
    • redux-unhandled-action: Warns when actions produce no state changes.

    Mutation Detection:

    • redux-immutable-state-invariant: Throws an error if state is mutated inside a dispatch or between dispatches.
    • mutation-sentinel: Deeply detects mutations at runtime to enforce immutability.
    • redux-pure-connect: Checks if react-redux's connect method is passed impure mapState functions.

  11. Integrate Routing and Forms with Redux

    master

    For complex applications, use specialized libraries to manage routing and form state within Redux:

    Routing:

    • connected-react-router: Synchronizes React Router v4+ state with the Redux store.
    • redux-first-router: A Redux-first routing approach where everything is state, keeping the address bar in sync.

    Forms:

    • redux-form: Enables React HTML forms to store state in Redux.
    • react-redux-form: A collection of reducer and action creators for complex, performant forms.

  12. Summary of RTK Query Core Concepts

    master

    RTK Query is a powerful data fetching and caching solution built into Redux Toolkit. Key takeaways for usage:

    • Abstraction: It abstracts away loading states, result storage, and request management.
    • API Slices: Applications typically use a single API slice defined via createApi. This slice contains multiple endpoints for different server operations.
    • Query Endpoints: Used for fetching data. They provide React hooks that return data and status flags (isLoading, isFetching, isSuccess, isError).
    • Mutation Endpoints: Used for updating data (POST, PUT, DELETE). They provide a trigger function that returns a Promise which can be .unwrap()ed to handle the result or errors directly in your component logic.
    • Cache Management: Uses a tag-based system to automatically synchronize client-side cache with server-side state via providesTags and invalidatesTags.