Getting the state with rematch

Question

I am learning rematch/redux. I can't get the state to show with the API. I have the model imported in index.js along with the store and the provider. These are my reducers/effects:

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

And this is my component:

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);

I am not sure what I am missing.

Thank you.

Never used rematch before, but I don't see where you are calling `loadProducts`? I was expecting to seeing something like `useEffect(() => {products.loadProducts()}, [])` or something in `App` — andy mccullough, Aug 24 '21 at 11:57

score 1 · Answer 1 · answered Sep 20 '21 at 22:06

I'm Rematch maintainer, you should review our documentation or consider buying the official Redux made easy with Rematch book where you'll learn all this questions.

I highly recommend using React-Redux hooks instead of connect method.

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;

Be careful with hooks, you're forgetting to add the deps array to useEffect, any code you add there will run infinitely

Your Rematch models looks fine, you just need to work more on React essentials :)

The issue was fixed by changing the name of the model, as both, model and state were called the same — Mario Garcia, Sep 24 '21 at 13:46

score 0 · Answer 2 · answered Oct 27 '22 at 13:57

0

Redux rematch

Create music listing app using youtube api
How to create folder structure and setup store for react redux

Working code sandbox link

https://codesandbox.io/s/rematch-yf77l0?file=/src/pages/musics/index.jsx

answered Oct 27 '22 at 13:57

AbdulmateenChitrali

333
3
9

Getting the state with rematch

2 Answers2