@types/react-redux

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>;
};