Accessing Redux from Components In React & React Native
Last week, I starting talking about how to set up a basic version of Redux in your React or React Native application. To make things clearer, I based my setup on my event application, where users create events that other users attend. We generated the action creators, reducers, and Redux store, and wrapped the application in a provider. Today I’ll finish the loop and talk about how to access the Redux store in your application using both class and functional components. The provider we added to the root component provides the store to all the components in your application. Therefore, we will just look at how to access the store from an individual component.
Class Components
For class components, we use connect() to connect this particular component to the store. Notice on the last line of the component we are using the connect function with two arguments — map state to props and map dispatch to props — and then also calling the class component. Basically, we are exporting a connected version of the component. For simplicity, in this example, I’ve made a component that only concerns the users of my event application. Therefore, I only care about reading and modifying the users’ slice of the global state.
The first parameter, map state to props, takes the Redux state from the store and, like it says, maps it to the component’s props. Therefore, the way the component connects to Redux state is through its props and we reference those props inside the component. Map state to props allows us to read our global state. Notice the map state to props function, which is expected to return an object that will directly reflect what your component’s props look like. In this example, you can access the users’ slice of Redux state by accessing the users key of props, or this.props.users.
The second parameter, map dispatch to props, maps the functions that change your state to your props. So, just as map state to props allows you read state, map dispatch to props allows you to update state. For simplicity, I’ve used the object shorthand form, which is an object where each field is an action creator (in this case, the action creator we’re using is updateUser), to write map dispatch to props. This method cuts down on a lot of repetitive code, however you can also write it as a function using dispatch.
The props for this component:
Functional Components
For functional components, we use hooks — useSelector() and useDispatch(). You can think of useSelector as analogous to map state to props and useDispatch as analogous to map dispatch to props. Notice that we’ve declared the constants for the hooks inside the component. In this example, I’ve made a component that only concerns the events of my event application. For useSelector, we’ve mapped the events’ slice of state to state (which is how we will read Redux state in the rest of the component, for example, see state.currentEvent). For useDispatch, we’ve assigned dispatch as a shorthand to access it in the component and when we call it, we call the action creator we imported (updateEvent) in order to dispatch that action creator.
What we declared as state for this component:
This is what your application should look like now (code is also here):
