How do you connect React components to the Redux store?

You connect components with the React-Redux library, in three steps:

1. Wrap the app once in the Provider component, so every component below it can reach the store.
2. Read data with the useSelector hook. It runs your selector function and re-renders the component when the selected value changes.
3. Send actions with the useDispatch hook, which returns the store's dispatch function.

Select only the data a component needs, like state.todos, rather than the whole state object. A component that selects everything re-renders on every state change. The older connect function with mapStateToProps still works, but the hooks are the recommended default.

// App.js
import { Provider } from 'react-redux';
<Provider store={store}>
  <App />
</Provider>

// Component
import { useSelector, useDispatch } from 'react-redux';
const todos = useSelector(state => state.todos);
const dispatch = useDispatch();