@types/react-redux

What is @types/react-redux?

The @types/react-redux package provides TypeScript type definitions for the react-redux library, which allows React components to interact with a Redux store. It enables type checking and IntelliSense for react-redux functions and components when using TypeScript.

What are @types/react-redux's main functionalities?

Provider Component Typing

The Provider component makes the Redux store available to any nested components that need to access the Redux store.

import { Provider } from 'react-redux';
import { store } from './store';

const App = () => (
  <Provider store={store}>
    {/* Your app components go here */}
  </Provider>
);

connect Function Typing

The connect function connects a React component to the Redux store. It provides type checking for the mapStateToProps and mapDispatchToProps arguments, as well as the component's props.

import { connect } from 'react-redux';

interface Props {
  todos: string[];
}

const TodoList: React.FC<Props> = ({ todos }) => (
  <ul>{todos.map(todo => <li key={todo}>{todo}</li>)}</ul>
);

const mapStateToProps = (state: RootState) => ({
  todos: state.todos
});

export default connect(mapStateToProps)(TodoList);

Hooks Typing

TypeScript types for the useSelector and useDispatch hooks from react-redux, which allow you to access the state and dispatch actions in a type-safe manner.

import { useSelector, useDispatch } from 'react-redux';
import { RootState } from './store';

const TodoList = () => {
  const todos = useSelector((state: RootState) => state.todos);
  const dispatch = useDispatch();

  // Use dispatch with type-checked actions
  // ...

  return <ul>{todos.map(todo => <li key={todo}>{todo}</li>)}</ul>;
};

Other packages similar to @types/react-redux

mobx-react

mobx-react provides React bindings for MobX, which is a state management library. It is similar to react-redux in that it allows React components to react to state changes, but it uses observables rather than a single store and actions.

zustand

zustand is a small, fast, and scalable bearbones state-management solution using simplified flux principles. Unlike react-redux, it doesn't require a Provider component or connect function, and it uses hooks for state management.

recoil

Recoil is a state management library for React that provides several capabilities similar to Redux. It allows you to manage global state with a more React-like API using atoms and selectors, which can be seen as an alternative to the Redux pattern.

README

Installation

npm install --save @types/react-redux

Summary

This package contains type definitions for react-redux (https://github.com/reduxjs/react-redux).

Details

Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-redux/v6.

Additional Details

• Last updated: Tue, 07 Nov 2023 20:08:00 GMT
• Dependencies: @types/react, redux

Credits

These definitions were written by Qubo, Curits Layne, Frank Tan, Nicholas Boll, Dibyo Majumdar, Prashant Deva, Valentin Descamps, Johann Rakotoharisoa, Anatoli Papirovski, and Boris Sergeyev.