React + Redux中dom操作的复杂性

Question

我正在尝试使用React和Redux简化工作流程.

对于基本的DOM操作任务,例如向下滚动元素或对某个区间中的某些内容执行检查,您必须声明许多函数,并且当应该只有几行代码时,您可能突然有100行代码.

以下示例使用react-redux入门套件.使用辅助模块,如

createAction,handleActions

执行的任务基本上是

var objDiv = document.getElementById("id");
objDiv.scrollTop = objDiv.scrollHeight;

首先,我们必须在模块中设置我们的操作类型

export const SCROLL_DOWN = 'SCROLL_DOWN'

然后我们必须定义向下滚动的动作

export const setScrollDown = createAction(SCROLL_DOWN, (setScrollDown = true) => setScrollDown)

然后是reducer,我们设置状态hasScrolledDown,它必须在我们所在的模块中定义.

export default handleActions({
  [SCROLL_DOWN]: (state, { payload }) => {
    return {
      ...state, hasScrolledDown: payload
    }
  }
}, {hasScrolledDown: false})

接下来,我们必须在View中使用所有这些

我们定义propTypes

class MessagesView extends React.Component {
  static propTypes = {
    setScrollDown: PropTypes.func,
    hasScrolledDown: PropTypes.bool
  };

最后我们在componentDidMount和componentDidUpdate函数中使用它们来操作我们需要导入react-dom模块的dom,因此它位于文档的顶部.

import ReactDOM from 'react-dom'

然后我们终于可以向下滚动页面了.

componentDidMount () {
  this.props.setScrollDown(false)
}

componentDidUpdate (prevProps, prevState) {
  if (!this.props.hasScrolledDown) {
    ReactDOM.findDOMNode(this).scrollIntoView(false)
    this.props.setScrollDown(true)
  }
}

所以,我的问题是:我是以错误的方式解决这个问题,还是有一个简单的解决方案来处理像这样的简单dom操作？

正如你想象的那样,当你需要在这里和那里执行像这样的基本dom操作任务的大型应用程序时,代码库的增长速度非常快.

Answer 1

对于像这样的DOM这样的东西,比如滚动到某一点,做整个Redux状态/动作/减速器的事情有点过分.当然,这一切都归结为个人偏好,但没有必要让事情变得更复杂.

不知道你的整个应用程序,我只是在这里做出假设,但想象你的页面有一个按钮或其他东西,其唯一目的是将用户滚动回到窗口顶部.这是Redux或React不应该关心的事情,因此利用它来处理旧的javascript是一件很容易理解的问题.解决这个问题的方法通常包括componentDidMount,在按钮上添加一个点击监听器,并在那里处理滚动.

我甚至在工具提示和其他我不需要持久状态的GUI中使用这种方法,因为通常它没有意义.Redux非常适合跟踪应用程序状态,但这并不意味着您不得不将它用于任何您无法在任何给定时间重现的小事情.