- Fork
- Clone
npm install
npm start
Our application is a hit! Baseball coaches around the world are using our application to track their list of pitchers and catchers. They love that clicking a name updates immediately and they can add new pitchers or catchers on the fly.
We're about to add a ton of new features to our application, but before we do, we should add redux to our application so that our App.jsx
component doesn't get out of control.
Add redux into the project. You'll need to add redux
and react-redux
packages in order to do this.
Move the pitcherList
and catcherList
to reducers! Refactor app to use that data from Redux.
You will need to dispatch
from your forms submission -- eg handleCatcherSubmit
. The logic for adding will happen in the reducer!
Now that we've got redux setup, time to start making components.
In App.jsx
replace the line:
<div>Total Pitchers: {pitcherList.length}</div>
with
<TotalPitchers />
It shouldn't need props passed, because the pitcherList
should be stored in Redux. Have your new component reach out!
In App.jsx
replace the line:
<div>Total Catchers: {catcherList.length}</div>
with
<TotalCatchers />
This will also use Redux for the data, just like the Pitchers.
One of the joys of redux is that it can really clean up our components. Make App.jsx
look like this:
function App() {
return (
<div>
<h1>Redux Baseball Pitchers</h1>
<OnTheMound />
<BehindThePlate />
<TotalPitchers />
<TotalCatchers />
<h3>All Pitchers</h3>
<PitcherForm />
<PitcherList />
<h3>All Catchers</h3>
<CatcherForm />
<CatcherList />
</div>
);
}
export default App;
There are about nine stretch goals wrapped up into this one stretch goal, so break things down into very small steps.
If you have moved everything out of App.jsx
, your index.jsx
is probably getting a little crowded. Move each of your reducers to a separate file in a new src/redux/reducers
folder.