-
Use the React Redux library to connect the store to the React application.
-
Utilize the component, the
connect
function andmapStateToProps
to access Redux store content.
In this lesson, we want to explore how mapStateToProps
is used to connect
regular React components with the Redux store. This is also a good
opportunity to review the steps for using the redux
and react-redux
packages in your app.
Some files are provided, including UserInput
and the reducer, manageUsers
,
but the Redux store isn't fully hooked up yet.
In src/index.js
, use the createStore
from redux
, passing in the provided
reducer, manageUsers
, to create a store
. Use Provider
from react-redux
to wrap <App />
, passing store
as a prop to the Provider
. This will give
your components access to the store.
Run npm start
and open up your browser's dev console. If everything is
connected correctly in index.js
, submitting something using the provided form
should cause a console.log
to fire in our reducer, indicating that the values
have been added to our store.
In UserInput.js
, take note of the way an action is dispatched to the Redux
store, as it is slightly different than what we've seen before:
...
handleOnSubmit = (event) => {
event.preventDefault();
this.props.dispatch({type: 'ADD_USER', user: this.state})
}
...
export default connect()(UserInput);
Wrapping a component in connect
without any arguments will still provide one
prop, dispatch()
! This makes it possible for us to dispatch whatever actions
we want, from anywhere. We will go into greater detail on how we can apply
dispatch using connect
, but using this.props.dispatch()
is a handy and
simple way to allow components to interact with the store.
Now that we've got a working store, we want to get access to it and display the contents of our store's state.
-
Connect the Users component similar to how it is connected in UserInput.
-
Write a function in
Users.js
, but outside of the Users class calledmapStateToProps
.mapStateToProps
accepts one argument,state
, the current version of your store's state. Usestate
to access the array ofusers
. YourmapStateToProps
function should return an object with keys. Each key will become a prop in your component, allowing you to assign values based on the providedstate
.
The Users component should display the username of a user submitted to the
store. To pass the final test, it should also display a total count of current
users. Try to use mapStateToProps
to solve both, returning two keys, one for
users
and one for the userCount
.
With all tests passing, you should have a working form that adds and successfully displays usernames, as well as a total count of those users. While these are small bits of data, we've got a fully integrated React/Redux application, ready to be expanded upon!