Access State with the Redux useSelector Hook
Redux has greatly simplified the pattern used to access state from its store. We now use the useSelector hook.
This hook takes as its main argument a function that receives the entire redux state and returns a single part of that state. It looks like this.
const amount = useSelector(state => state.amount);
Components using this hook will be re-rendered any time the returned value changes (either the value itself, or its reference in the case of objects and arrays).
Learn more about this hook here: https://react-redux.js.org/api/hooks
Instructor: [0:00] Open up exchangerate.js and, in the top of the file, import { useSelector } from 'react-redux'. Then, comment out the first two useState lines. Type const amount = useSelector((state) => state.amount). We'll do the same thing for currencyCode, const currencyCode = useSelector((state) => state.currencyCode).
[0:26] The useSelector hook takes a function which receives as its first argument state, and then it allows you to return from that which part of the state that you want. All of our state right now is defined in the file called store.js. Right now, it's just this initial state. We can access state.amount or state.currencyCode. Anything that exists in this object, we can access.
[0:46] Our useSelector hook takes the full state and returns state.amount and state.currencyCode. Then, anytime those values are updated within our Redux store, this component will be automatically re-rendered.
[0:57] You see over here our app is now complaining about setCurrencyCode and setAmount failing. For now, we're just going to put in two empty functions. setAmount = function(), and setCurrencyCode = function(), which should appease our application for the time being.
[1:12] Now that we have these selectors in place, pulling the amount and currencyCode, if we go into our store and we change, for example, the currencyCode to...Right now, it's set to Euros. We change it to USD, or we set the amount of 19.99. You can see it gets updated over here right away to JPY for currencyCode, and it's showing up as expected.
[1:33] We've now replaced useState to grab the current version of amount and currencyCode with useSelector. It's almost a one to one change.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!