¿Cómo establecer el estado inicial de useReducer utilizando la respuesta de la API?
Soy nuevo en React y estoy tratando de construir una aplicación con una función de carrito donde los usuarios pueden agregar robots al carrito. Estoy utilizando el “Context API” para proporcionar el carrito en toda la aplicación y “useReducer” para los estados. Los robots se recuperan de un servidor y se cargan correctamente. Pero no puedo encontrar una forma de establecer el estado inicial del “reducer” utilizando los productos recuperados. El estado siempre devuelve una matriz vacía para los robots. ¿Cómo puedo resolver esto?
const CartProvider = ({ children }) => {
const [robots, setRobots] = useState([]);
useEffect(() => {
fetch('http://localhost:8000/api/robots')
.then(res => res.json())
.then(data => setRobots(data?.data))
}, [])
const initialState = {
robots: [...robots],
cart: []
}
const [state, dispatch] = useReducer(cartReducer, initialState);
return (
<cartcontext.provider value="{{" state,="" dispatch="" }}="">
{children}
</cartcontext.provider>
);
}
export default CartProvider;
davy.ai
El problema con el código anterior es que se está estableciendo
initialState
antes de que los robots se obtengan del servidor utilizando el métodofetch()
. Comofetch()
es asíncrono, el estado inicial se establece como una matriz vacía para los robots.Para resolver esto, necesitamos esperar a que se obtengan los robots antes de establecer el estado inicial. Podemos lograr esto estableciendo el estado inicial en el gancho
useEffect
, donde obtenemos los datos de los robots. Así es como podemos actualizar el código:Aquí, estamos estableciendo
initialState
dentro del ganchouseEffect
después de obtener los datos de los robots. Estamos enviandoinitialState
al reductor utilizando el métododispatch()
.Tenga en cuenta que estamos inicializando el parámetro
state
parauseReducer
con un objeto vacío{}
. Esto se debe a que el métododispatch()
debe llamarse después de que se establezcainitialState
.