Question

假设我有一个带有点击处理程序的组件，它不需要修改Redux存储。也就是说，根据组件的道具，它可能会启动文件下载。

即。您有一个Web界面，用于在服务器上处理的视频列表。单击视频项目检查道具以查看视频是否已完成处理。如果有，它将开始下载视频，另外它会弹出警报，说明视频仍处理。

通常，处理程序往往在mapDispatchToProps中定义。但是，在这种情况下，我实际上并不需要触摸状态，因此在那里定义处理程序并不感觉正确。

这样一个处理程序的正确位置是否在“哑巴”中。组件而不是“智能”组件容器

Answer 1

我仍然会在容器中有这个并将该函数作为道具传递 - 只是不在mapDispatchToProps。

e.g：

// SmartComponent.js
import React, { Component } from 'react'
import DumbComponent from '/path/to/DumbComponent'

export class SmartComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleOnClick = this.handleOnClick.bind(this);
  }

  handleOnClick(params) {
    // do whatever you need to do here
  }

  render() {
    return (
      <DumbComponent handleOnClick={this.handleOnClick} />
    );
  }
};

export default SmartComponent;

// DumbComponent.js

import React from 'react'
import Button from '/path/to/button'

export const DumbComponent = (props) = {
  const { handleOnClick } = props;
  return (
    <Button onClick={handleOnClick} />
  );
}

export default DumbComponent;

我可能还应该补充一点，我通常构造它，以便我有一个高于此的连接到商店的另一个级别 - 例如ContainerComponent - 这通常是路径的视图。这就是我没有将此SmartComponent连接到商店的原因。你可以这样做。

Redux：在哪里放置＆＃34;哑巴＆＃34;处理程序？

1 个答案: