问题:如何组织不修改状态的动作?

假设我有一个这样的反应组件:

class App extends Component {
  print = () => {
    const { url } = this.props
    const frame = document.createElement('iframe')

    frame.addEventListener('load', () => {
      const win = frame.contentWindow

      win.focus()
      win.print()
      win.addEventListener('focus', () => document.body.removeChild(frame))
    })

    Object.assign(frame.style, {
      visibility: 'hidden',
      position: 'fixed',
      right: 0,
      bottom: 0
    })

    frame.src = url

    document.body.appendChild(frame)
  }

}

基本上,单击按钮会为用户调用浏览器中的打印功能。在这种情况下,我是否仍然将其变成像DO_PRINT这样的 redux 操作,它实际上对我的 redux 状态没有任何作用,或者我只是不理会它?

解答

对于您的特定示例,我将避免创建 Redux 操作,因为如果DO_PRINT仅调用window.print(),则无需更新任何状态。

事实上,假设您正在创建一个“打印按钮”组件,我会将其重新定义为一个哑组件。 (参见展示组件和容器组件之间的区别。)

import React from ‘react’;

const PrintButton = () => {
  const onClick = () => {
    window.print();
  };

  return <button onClick={onClick}>Click Me</button>
};

export default PrintButton;

仅供参考,上面的代码可能不是为无状态组件声明事件处理程序的最有效方式,因为每次呈现组件时都会调用该函数。可能有更好(更有效)的方法(在另一个 SO 问题中描述)但这超出了这个问题。