context custom hook and reducer

Author: erickcm2k

epic-react-kent-c-dodds/03-Advanced-React-Hooks/src/exercise/03.extra-2.js

@@ -23,21 +23,35 @@ import {useAsync} from '../utils'
 // 🐨 return your context provider with the value assigned to what you get back from useReducer
 // 💰 value={[cache, dispatch]}
 // 💰 make sure you forward the props.children!
-
-function pokemonCacheReducer(state, action) {
-  switch (action.type) {
-    case 'ADD_POKEMON': {
-      return {...state, [action.pokemonName]: action.pokemonData}
-    }
-    default: {
-      throw new Error(`Unhandled action type: ${action.type}`)
+const PokemonCacheContext = React.createContext()
+
+function PokemonCacheProvider(props) {
+  function pokemonCacheReducer(state, action) {
+    switch (action.type) {
+      case 'ADD_POKEMON': {
+        return {...state, [action.pokemonName]: action.pokemonData}
+      }
+      default: {
+        throw new Error(`Unhandled action type: ${action.type}`)
+      }
     }
   }
+  const [cache, dispatch] = React.useReducer(pokemonCacheReducer, {})
+  const value = [cache, dispatch]
+  return <PokemonCacheContext.Provider value={value} {...props} />
+}
+
+function usePokemonCache() {
+  const context = React.useContext(PokemonCacheContext)
+  if (!context) {
+    throw new Error('usePokemonCache must be used in a PokemonCacheProvider.')
+  }
+  return context
 }
 
 function PokemonInfo({pokemonName}) {
   // 💣 remove the useReducer here (or move it up to your PokemonCacheProvider)
-  const [cache, dispatch] = React.useReducer(pokemonCacheReducer, {})
+  const [cache, dispatch] = usePokemonCache()
   // 🐨 get the cache and dispatch from useContext with PokemonCacheContext
 
   const {data: pokemon, status, error, run, setData} = useAsync()
@@ -55,7 +69,7 @@ function PokemonInfo({pokemonName}) {
         }),
       )
     }
-  }, [cache, pokemonName, run, setData])
+  }, [cache, dispatch, pokemonName, run, setData])
 
   if (status === 'idle') {
     return 'Submit a pokemon'
@@ -70,7 +84,9 @@ function PokemonInfo({pokemonName}) {
 
 function PreviousPokemon({onSelect}) {
   // 🐨 get the cache from useContext with PokemonCacheContext
-  const cache = {}
+
+  const [cache] = usePokemonCache()
+
   return (
     <div>
       Previous Pokemon
@@ -94,17 +110,19 @@ function PokemonSection({onSelect, pokemonName}) {
   // 🐨 wrap this in the PokemonCacheProvider so the PreviousPokemon
   // and PokemonInfo components have access to that context.
   return (
-    <div style={{display: 'flex'}}>
-      <PreviousPokemon onSelect={onSelect} />
-      <div className="pokemon-info" style={{marginLeft: 10}}>
-        <PokemonErrorBoundary
-          onReset={() => onSelect('')}
-          resetKeys={[pokemonName]}
-        >
-          <PokemonInfo pokemonName={pokemonName} />
-        </PokemonErrorBoundary>
+    <PokemonCacheProvider>
+      <div style={{display: 'flex'}}>
+        <PreviousPokemon onSelect={onSelect} />
+        <div className="pokemon-info" style={{marginLeft: 10}}>
+          <PokemonErrorBoundary
+            onReset={() => onSelect('')}
+            resetKeys={[pokemonName]}
+          >
+            <PokemonInfo pokemonName={pokemonName} />
+          </PokemonErrorBoundary>
+        </div>
       </div>
-    </div>
+    </PokemonCacheProvider>
   )
 }