如何从 React Redux 中的子组件分派? [英] How can I dispatch from child components in React Redux?

问题描述

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

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

显然有更多的组件，嵌套更多.

我有这样一个更深入的类:

从'react'导入React；导出默认 React.createClass({渲染:函数(){var 类 = ['js-选择-产品','伪链接'];如果(this.props.selected){classes.push('粗体');}返回 (<li className="js-product-selection"><span onClick={this.props.onClick} className={classes.join(' ')} data-product={this.props.id}>{this.props.name}</span>);}});

我真正想做而不是 this.props.onClick 是将事件分派到 在减速器中设置状态.我在网上了解过一些关于上下文的内容，但由于该功能是否会消失，我收到了褒贬不一的评价.

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

解决方案

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

您的应用中可能有很多连接的组件，以及很多非连接的组件.这篇文章(redux 的作者)更详细地讨论了它，并且讨论负责 UI 实际显示的非连接(哑)组件，以及负责组合非连接组件的连接(智能)组件.

一个例子可能是(使用一些较新的语法):

class Image 扩展 React {使成为() {返回 (<div><h1>{this.props.name}</h1><img src={this.props.src}/><button onClick={this.props.onClick}>点击我</button>

);}}类 ImageList 扩展了 React {使成为() {返回 (this.props.images.map(i => <图片名称={i.name} src={i.src} onClick={this.props.updateImage}/>));}}const mapStateToProps = (状态) =>{返回 {图像:state.images，};};const mapDispatchToProps = (调度) =>{返回 {更新图像:() =>调度(更新图像操作())，};};导出默认连接(mapStateToProps，mapDispatchToProps)(ImageList)；

在这个例子中，ImageList 是一个连接组件，Image 是一个非连接组件.

My server has code like this:

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

<Layout> obviously has more components which nest more.

I have a class like this deeper down:

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

What I really want to do rather than this.props.onClick is dispatch an event to set state in a reducer. I've been some things online about context but I've gotten mixed reviews as that feature was or wasn't going away.

EDIT I see this connect method but I could have sworn I'd read not to use connect in children components.

解决方案

You're getting too caught up on children components. You should structure your app so that you have connected components and non-connected components. Non-connected components should be stateless, pure functions essentially, that take in all their requirements via props. Connected components should use the connect function to map redux state to props and redux dispatcher to props, and then be responsible for passing those props to child components.

You might have lots of connected components in an app, and lots of non-connected components. This post (by the creator of redux) discusses it in more detail, and talks about non-connected (dumb) components being responsible for actual display of UI, and connected (smart) components being responsible for composing non-connected components.

An example might be (using some newer syntax):

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

In this example, ImageList is a connected component and Image is a non-connected component.

这篇关于如何从 React Redux 中的子组件分派?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！