如何从 React Redux 中的子组件分派？

IT技术 javascript reactjs react-redux
2021-05-09 17:59:34

我的服务器有这样的代码：

<ReactRedux.Provider store={store}><Layout defaultStore={JSON.stringify(store.getState())}/></ReactRedux.Provider>

<Layout> 显然有更多的组件嵌套更多。

我有这样一个更深层次的课程：

import React from 'react';

export default React.createClass({
  render: function(){
    var classes = [
      'js-select-product',
      'pseudo-link'
    ];

    if (this.props.selected) {
      classes.push('bold');
    }

    return (
      <li className="js-product-selection">
        <span onClick={this.props.onClick} className={classes.join(' ')} data-product={this.props.id}>{this.props.name}</span>
      </li>
    );
  }
});

我真正想做的不是this.props.onClick调度事件以在 reducer 中设置状态。我已经在网上了解了一些关于上下文的内容，但由于该功能是否会消失，我得到了褒贬不一的评价。

编辑 我看到了这个连接方法，但我可以发誓我不会connect在子组件中使用它。

2个回答

你太关注子组件了。您应该构建您的应用程序，以便您拥有连接的组件和非连接的组件。非连接组件应该是无状态的，本质上是纯函数，通过 props 接受它们的所有需求。连接的组件应该使用connect函数将 redux state 映射到 props，将 redux dispatcher 映射到 props，然后负责将这些 props 传递给子组件。

一个应用程序中可能有很多连接的组件，还有很多非连接的组件。这篇文章（redux 的作者）更详细地讨论了它，并讨论了负责 UI 实际显示的非连接（哑）组件，以及负责组成非连接组件的连接（智能）组件。

一个例子可能是（使用一些较新的语法）：

class Image extends React {
  render() {
    return (
      <div>
        <h1>{this.props.name}</h1>
        <img src={this.props.src} />
        <button onClick={this.props.onClick}>Click me</button>
      </div>
    );
  }
}

class ImageList extends React {
  render() {
    return (
      this.props.images.map(i => <Image name={i.name} src={i.src} onClick={this.props.updateImage} />)
    );
  }
}

const mapStateToProps = (state) => {
  return {
    images: state.images,
  };
};
const mapDispatchToProps = (dispatch) => {
  return {
    updateImage: () => dispatch(updateImageAction()),
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(ImageList);

在本例中，ImageList是连通分量，Image是非连通分量。

曾经有人建议尝试限制您连接的组件。见例如：

https://github.com/reactjs/redux/issues/419

https://github.com/reactjs/redux/issues/419#issuecomment-178850728

无论如何，这对于将状态切片委托给组件确实更有用。如果这对您的情况有意义，您可以这样做，或者如果您不想传递调用的回调，dispatch()您可以根据需要传递商店或向下调度层次结构。

其它你可能感兴趣的问题
上一篇如何将自动床校平添加到基于 Marlin 的 CNC 控制器？ 下一篇如何在 swiper.js 中更改滑动方向？