UseReducer como alternativa a Redux

Cómo emplear el hook useReducer como alternativa a la librería Redux

Image for post
Image for post
Image for post
Image for post

Punto de partida

Centralizando el estado

useReducer

Vale… ¿y si quiero ejecutar funciones asíncronas?

const isPromise = obj => {
return (
!!obj &&
(typeof obj === "object" || typeof obj === "function") &&
typeof obj.then === "function"
);
}
const middleware = dispatch => {
return action => {
if (isPromise(action.payload)) {
action.payload.then(v => {
dispatch({ type: action.type, payload: v });
});
} else {
dispatch(action);
}
};
}
const Increment = () => {
const { dispatch } = useContext(CounterContext)
const asyncCounterInc = async () => new Promise(resolve => {
setTimeout(() => {
resolve({ value : 1});
}, 1000);
});

return (
<button
onClick={() => dispatch({ type: 'ADD_TO_COUNTER', payload: asyncCounterInc() })}>
Increment
</button>
)
}
<CounterContext.Provider value={{state, dispatch : middleware(dispatch)}}>

Conclusiones

¿Quieres recibir más artículos como este?

Entre paseo y paseo con Simba desarrollo en Symfony y React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store