使用Rematch/Redux开发时调用API后无法正确获取展示state问题求助

核心问题 #

你没有在组件生命周期中触发loadProducts异步方法，导致API请求从未执行，state一直停留在初始空数组状态，同时存在useEffect无依赖导致重复执行、mapDispatchToProps写法不规范的问题。

修复步骤 #

1. 调整组件代码 #

import './App.css';
import { connect } from 'react-redux';
import React, { useEffect } from 'react';

const mapStateToProps = ({ products }) => {
  return {
    products: products.products
  }
}

// 按Rematch规范从dispatch中取对应model的方法
const mapDispatchToProps = (dispatch) => {
  return {
    loadProducts: dispatch.products.loadProducts
  }
}

const App = ({ products, loadProducts }) => {
  // 组件挂载时触发一次数据加载，依赖数组置空避免重复调用
  useEffect(() => {
    loadProducts()
  }, [loadProducts])

  // 监听products变化打印，仅当products更新时执行
  useEffect(() => {
    console.log(products)
  }, [products])

  return (
    <div className="App">
      {/* 示例渲染逻辑，可按实际业务调整 */}
      {products.map(item => (
        <div key={item.id}>{item.title}</div>
      ))}
    </div>
  )
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

2. 可选校验项（如果仍有问题可逐一核对） #

• 确认Rematch初始化时已正确注册products model：

import { init } from '@rematch/core'
import products from './models/products'

export const store = init({
  models: {
    products
  }
})

• 确认入口文件已用Provider包裹根组件并传入正确store：

import React from 'react'
import ReactDOM from 'react-dom/client'
import { Provider } from 'react-redux'
import { store } from './store'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')).render(
  <Provider store={store}>
    <App />
  </Provider>
)

内容的提问来源于stack exchange，提问作者Mario Garcia