Providers
Okay, let's go integrate this now where context was being used before. Go to App.js:
// delete ThemeContext, useState import
// import
import { Provider } from "react-redux";
import store from "./store";
// delete useState call
// delete ThemeContext
// wrap app with
<Provider store={store}>[…]</Provider>;Feels nice deleting a lot of code, right?
Just like context makes your store available anywhere in your app, so does Provider.
Now that Redux is available everywhere, let's go add it to SearchParams.js
// replace ThemeContext import
// delete useContext import
import { useSelector } from "react-redux";
// replace context and some usestate references
const animal = useSelector((state) => state.animal);
const location = useSelector((state) => state.location);
const breed = useSelector((state) => state.breed);
const theme = useSelector((state) => state.theme);This is the newer, hooks-based API for react-redux. This allows you to provide it a selector function that will pluck the bit of state you need from Redux. Very clean, I quite like it. We'll see the older, connect-based one here in a bit.