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.