Me topé con la cuestión de escribir ganchos redux personalizados. Aquí hay una columna vertebral de App.js

 import { Provider, useStore, useDispatch } from "./redux"; import reducers from "./reducers"; import "./styles.css"; import React} from "react"; function Hello() { const counter = useStore(store => store.counter); const dispatch = useDispatch(); const increment = () => dispatch({ type: "INCREMENT" }); const decrement = () => dispatch({ type: "DECREMENT" }); return ( <div> <h3>Counter: 0</h3> <button onClick={increment}>+ Increment</button> &nbsp; <button onClick={decrement}>- Decrement</button> </div> ); } // <Provider reducers={reducers}> export default function App() { return ( <div className="App"> <Provider reducers={reducers}> <Hello /> </Provider> </div> ); }

La idea es escribir implementaciones para useStore , useDispatch y Provider .

Tuve la idea de que deberíamos usar la API de contexto y useReducer para tener acceso al dispatch , pero luego me quedé atascado.

Sé que el proveedor puede ser algo así

 const initialState = {}; const context = createContext(initialState); export function Provider({ children, reducers }) { const [state, dispatch] = useReducer(reducers, initialState); // children need to have access to dispatch return ( <context.Provider value={{ state, dispatch }}>{children}</context.Provider> ); }

Y de manera similar, podríamos haber usado useContext para tener acceso al valor pasado como

 export function useStore(selector) { const { state} = useContext(context); return { state.selector}; } /** * Returns the dispatch function */ export function useDispatch() { const { dispatch } = useContext(context); return { dispatch }; }

El archivo reducers también forma parte del enlace de sandbox que se proporciona a continuación. Pero estoy atascado y no puedo entender por qué no funciona. Por favor ayuda y explica. Aquí está el sandbox de trabajo en progresohttps://codesandbox.io/s/redux-forked-tlb4hb?file=/src/redux.js