@types/redux

What is @types/redux?

@types/redux provides TypeScript type definitions for the Redux library, enabling developers to use Redux with TypeScript more effectively. It includes type definitions for core Redux concepts such as actions, reducers, stores, and middleware.

What are @types/redux's main functionalities?

Defining Actions

This feature allows you to define the types of actions that can be dispatched in your Redux application. By defining action types, you can ensure that only valid actions are dispatched, reducing the risk of runtime errors.

interface IncrementAction {
  type: 'INCREMENT';
}

interface DecrementAction {
  type: 'DECREMENT';
}

type CounterAction = IncrementAction | DecrementAction;

Creating Reducers

This feature allows you to create type-safe reducers that handle state transitions based on the dispatched actions. By using TypeScript, you can ensure that your reducers handle all possible action types and return the correct state shape.

import { Reducer } from 'redux';

interface CounterState {
  count: number;
}

const initialState: CounterState = { count: 0 };

const counterReducer: Reducer<CounterState, CounterAction> = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

Configuring the Store

This feature allows you to create a Redux store with type-safe state and actions. By defining the state and action types, you can ensure that the store is correctly configured and that only valid actions are dispatched.

import { createStore, Store } from 'redux';

const store: Store<CounterState, CounterAction> = createStore(counterReducer);

Using Middleware

This feature allows you to apply middleware to your Redux store in a type-safe manner. Middleware can intercept and modify actions before they reach the reducer, enabling you to add custom behavior such as logging or asynchronous actions.

import { applyMiddleware, createStore, Store, Middleware } from 'redux';

const loggerMiddleware: Middleware<{}, CounterState> = store => next => action => {
  console.log('Dispatching:', action);
  let result = next(action);
  console.log('Next state:', store.getState());
  return result;
};

const store: Store<CounterState, CounterAction> = createStore(counterReducer, applyMiddleware(loggerMiddleware));

Other packages similar to @types/redux

@types/react-redux

@types/react-redux provides TypeScript type definitions for the react-redux library, which is used to connect React components to a Redux store. It offers similar type safety for actions, state, and dispatch, but is specifically designed for use with React.

redux-thunk

redux-thunk is a middleware that allows you to write action creators that return a function instead of an action. This is useful for handling asynchronous actions. While it does not provide type definitions itself, it is often used in conjunction with @types/redux to add type safety to asynchronous actions.

redux-saga

redux-saga is a middleware library that aims to make application side effects (e.g., asynchronous actions) easier to manage, more efficient to execute, and better at handling failures. It uses generator functions to handle side effects in a more declarative way. Like redux-thunk, it is often used with @types/redux for type safety.

README

This is a stub types definition for Redux (https://github.com/reactjs/redux). Redux provides its own type definitions, so you don't need @types/redux installed!