MENU


Redux

Alexa's Ranking: 21,568

Redux is a predictable state container for JS Apps. It is:

Predictable: Redux helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.

Centralized: Centralizing your application's state and logic enables powerful capabilities like undo/redo, state persistence, and much more.

Debuggable: The Redux DevTools make it easy to trace when, where, why, and how your application's state changed. Redux's architecture lets you log changes, use "time-travel debugging", and even send complete error reports to a server.

Flexible: Redux works with any UI layer, and has a large ecosystem of add-ons to fit your needs.

Redux Toolkit simplifies the process of writing Redux logic and setting up the store. With Redux Toolkit, that same logic looks like:
import { createSlice, configureStore } from '@reduxjs/toolkit'const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0
  },
  reducers: {
    incremented: 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
    },
    decremented: state => {
      state.value -= 1
    }
  }})export const { incremented, decremented } = counterSlice.actionsconst store = configureStore({
  reducer: counterSlice.reducer})// Can still subscribe to the storestore.subscribe(() => console.log(store.getState()))// Still pass action objects to `dispatch`, but they're created for usstore.dispatch(incremented())// {value: 1}store.dispatch(incremented())// {value: 2}store.dispatch(decremented())// {value: 1}