Redux

Common errors

• Error: Actions may not have an undefined "type" property. Have you misspelled a constant?

  cause An action was dispatched without a `type` property or with `type` as `undefined`/`null`.
  fix Ensure all dispatched actions have a `type` property set to a string value, e.g., `{ type: 'MY_ACTION' }`.

• Error: The reducer "myReducer" returned undefined when called with an undefined state. To ignore an action, you must explicitly return the previous state. If you want this reducer to hold no value, you can return null instead of undefined.

  cause A reducer returned `undefined` for its initial state, or when handling an action that it doesn't recognize.
  fix Ensure every reducer returns a valid state value (not `undefined`) for its initial state and for any action it does not handle explicitly. Always provide a default state parameter, e.g., `(state = initialState, action) => { ... }`.

• TS2304: Cannot find name 'PreloadedState'.

  cause Attempting to use the `PreloadedState` TypeScript type, which was removed in Redux v5.
  fix Update your TypeScript code to remove references to `PreloadedState` and adjust the `Reducer` type signature to use its new generic argument for preloaded state if needed.

• 'AnyAction' is deprecated.

  cause Using the `AnyAction` TypeScript type, which has been deprecated in Redux v5.
  fix Replace `AnyAction` with the new `UnknownAction` type for better type safety.

• Error: Expected the last argument to be an enhancer. Instead received...

  cause When calling `createStore`, multiple store enhancers were passed directly as arguments instead of being composed using `compose`.
  fix Combine multiple store enhancers into a single function using `compose` before passing them to `createStore`. Example: `createStore(reducer, compose(applyMiddleware(thunk), devToolsEnhancer))`.

Warnings

• deprecated The `createStore` function is officially deprecated in Redux v5. While still functional, new applications are strongly encouraged to use `configureStore` from `@reduxjs/toolkit`.
  Fix: Use `configureStore` from `@reduxjs/toolkit` for new store creation. Example: `import { configureStore } from '@reduxjs/toolkit'; const store = configureStore({ reducer: myReducer });`
• breaking Actions dispatched to the store MUST have a `type` property that is a string. Non-string types for `action.type` are no longer permitted.
  Fix: Ensure all actions have a `type` property with a string value. E.g., `{ type: 'MY_ACTION' }`.
• deprecated The `AnyAction` TypeScript type has been deprecated in favor of `UnknownAction` to improve type safety.
  Fix: Replace usages of `AnyAction` with `UnknownAction` in your TypeScript code.
• breaking The `PreloadedState` TypeScript type has been removed and replaced by a new generic argument for the `Reducer` type.
  Fix: Adjust `Reducer` type definitions to use the new generic argument for preloaded state. Refer to the Redux v5 migration guide for examples.
• gotcha The Redux team officially recommends using Redux Toolkit for all new Redux applications and most existing ones. Redux Toolkit simplifies common tasks, enforces best practices, and prevents common mistakes.
  Fix: Consider migrating your Redux application to use Redux Toolkit (`@reduxjs/toolkit`) for a better development experience and reduced boilerplate.

Install

• npm install redux npm
• yarn add redux yarn
• pnpm add redux pnpm

Imports

• createStore

  import { createStore } from 'redux'

  While `createStore` is deprecated in v5, it's the core API for Redux directly. For new applications, the Redux team strongly recommends using `configureStore` from `@reduxjs/toolkit`.
• combineReducers

  import { combineReducers } from 'redux'

• applyMiddleware

  import { applyMiddleware } from 'redux'

Quickstart

This quickstart demonstrates a basic Redux store setup using `createStore`, a simple reducer, and dispatching actions. It shows how to initialize the store, retrieve the current state, and update it via actions.

import { createStore } from 'redux';

interface AppState {
  counter: number;
}

type Action = { type: 'INCREMENT' } | { type: 'DECREMENT' };

const initialState: AppState = { counter: 0 };

function reducer(state: AppState = initialState, action: Action): AppState {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, counter: state.counter + 1 };
    case 'DECREMENT':
      return { ...state, counter: state.counter - 1 };
    default:
      return state;
  }
}

const store = createStore(reducer);

console.log('Initial state:', store.getState());

store.dispatch({ type: 'INCREMENT' });
console.log('State after increment:', store.getState());

store.dispatch({ type: 'DECREMENT' });
console.log('State after decrement:', store.getState());

// Note: For new applications, it is highly recommended to use Redux Toolkit's `configureStore`
// and `createSlice` for a more efficient and simpler setup.