在 react-redux 中分派后渲染

Question

我对react-redux 有一点疑问。组件必须在完成获取数据后呈现。当前代码 returns 总是 {}。我该如何解决这个问题？

function Category(props) {
  const [categories, setCategories] = useState([]);
  props.dispatch(categoryActions.fetch());
  useEffect( () => {
    setCategories(props.categories)
  }, [props]);

  return (
    <Container className={classes.root}>
        .....
    </Container>
  );
}

const mapStateToProps = state => ({
    categories: state.categories,
});

function mapDispatchToProps(dispatch) {
    return {
      dispatch,
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(Category)

Answer 1

首先，我有一些问题：

const [categories, setCategories] = useState([]);是做什么的？
categories 由 Connect 作为道具提供给 Category 组件。
useState hook用于定义和控制内部状态。
这在技术上并不冲突，因为您可以分别称它们为 props.categories 和 categories，但可能会混淆。
您想在组件中调度什么操作？
mapDispatchToProps 看起来什么也没做。看看他们的 official example。

在 react-redux 中分派后渲染

Rendering after dispatch in react-redux

reactjs

redux

dispatch