Estoy aprendiendo revancha/redux. No puedo mostrar el estado con la API. Tengo el modelo importado en index.js
junto con la tienda y el proveedor. Estos son mis reductores/efectos:
import { getItems } from './service' const products = { state: { products: [], }, reducers: { setProducts(state, products) { return { ...state, products, }; }, }, effects: { async loadProducts() { const products = await getItems() // <-- This is the api working normally this.setProducts(products) }, } } export default products
Y este es mi componente:
import './App.css'; import { connect } from 'react-redux'; import React, { useEffect } from 'react'; const mapStateToProps = ({ products }) => { return { ...products } } const mapDispatchToProps = ({ products }) => { return { ...products } } const App = ({ products }) => { useEffect(() => { console.log(products) }) return ( <div className="App"> {console.log(products)} </div> ) } export default connect(mapStateToProps, mapDispatchToProps)(App);
No estoy seguro de lo que me estoy perdiendo.
Gracias.
Soy el mantenedor de Rematch, deberías revisar nuestra documentación o considerar comprar el libro oficial de Redux simplificado con Rematch, donde aprenderás todas estas preguntas.
Recomiendo encarecidamente usar ganchos React-Redux en lugar del método de connect
.
import './App.css'; import { useSelector, useDispatch } from 'react-redux'; import React, { useEffect } from 'react'; const App = () => { const dispatch = useDispatch(); const { products } = useSelector(rootState => rootState.products) useEffect(() => { dispatch.products.loadProducts(); }, []); return ( <div className="App"> {console.log(products)} </div> ) } export default App;
Tenga cuidado con los ganchos, está olvidando agregar la matriz deps a useEffect, cualquier código que agregue allí se ejecutará infinitamente
Tus modelos Rematch se ven bien, solo necesitas trabajar más en los elementos esenciales de React :)
Espero que esto sea útil
import React, { useEffect} from 'react'; import { connect } from 'react-redux'; export function UserIndex({users,userroles,getUsers,getUserRoles }){ // Load data on component mount useEffect(() => { getUsers({}); getUserRoles(); }, [getUserRoles, getUsers]); console.log(users); console.log(userroles); return ( <></> ); } const mapState = (state) => ({ users: state.user.users, userroles :state.listHelper.userroles, }); const mapDispatch = (state) => ({ getUsers: (payload) => state.user.getUsers(payload), getUserRoles : () => state.listHelper.getUserRoles(), }); const UserIndexContainer = connect(mapState, mapDispatch)(UserIndex); export default UserIndexContainer;