Complete Intro to React v7

We're not quite done here. We got the reading part of Redux done but not the writing. Let's go do that too in SearchParams.js

import { useSelector, useDispatch } from "react-redux";
import changeLocation from "./actionCreators/changeLocation";
import changeTheme from "./actionCreators/changeTheme";
import changeAnimal from "./actionCreators/changeAnimal";
import changeBreed from "./actionCreators/changeBreed";

// up with other hooks
const dispatch = useDispatch();

// change inputs

<input
  id="location"
  value={location}
  placeholder="Location"
  onChange={(e) => dispatch(changeLocation(e.target.value))}
/>

<select
  id="animal"
  value={animal}
  onChange={(e) => dispatch(changeAnimal(e.target.value))}
  onBlur={(e) => dispatch(changeAnimal(e.target.value))}
></select>

<select
  disabled={!breeds.length}
  id="breed"
  value={breed}
  onChange={(e) => dispatch(changeBreed(e.target.value))}
  onBlur={(e) => dispatch(changeBreed(e.target.value))}
></select>

<select
  value={theme}
  onChange={(e) => dispatch(changeTheme(e.target.value))}
  onBlur={(e) => dispatch(changeTheme(e.target.value))}
></select>

• This dispatching is so much nicer than it is with other API
• The useDispatch hook gives you back a dispatching function so you can dispatch actions
• That's really it!

Now we're also using mapDispatchToState which lets us write functions to dispatch actions to Redux. Let's quickly add it to Details.js

// replace ThemeContext import
import { connect } from "react-redux";

// remove all the ThemeContext stuff and the interior function
// replace `theme` with `this.props.theme` for the backgroundColor

// bottom
const mapStateToProps = ({ theme }) => ({ theme });
const ReduxWrappedDetails = connect(mapStateToProps)(Details);

// replace inside WrappedDetails
<ReduxWrappedDetails params={params} />;

Now it should work! Redux is a great piece of technology that adds a lot of complexity to your app. Don't add it lightly. I'd say you'd rarely want to start a new project using Redux: hit the problems first and then refactor it in. You just saw how.