javascript - 通过 rematch 获取状态

Question

我正在学习 rematch/redux。我无法通过 API 显示状态。我将模型index.js与商店和提供商一起导入。这些是我的减速器/效果：

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

这是我的组件：

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

我不确定我错过了什么。

谢谢你。

Answer 1

我是 Rematch 维护者，您应该查看我们的文档或考虑购买官方的 Redux 轻松使用 Rematch 书籍，您将在其中学习所有这些问题。

我强烈推荐使用 React-Redux 钩子而不是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;

小心钩子，您忘记将 deps 数组添加到 useEffect，您添加的任何代码都将无限运行

你的 Rematch 模型看起来不错，你只需要在 React 基础上做更多工作:)