Question

我有自定义的scrollspy。有两个组成部分。平面列表和嵌套目录。该列表有一个onscroll处理程序，可以调度“滚动”的操作。然后，reducer返回一个新状态，该状态反映目录的位置是静态还是固定，以及当前部分是什么。现在，我不知道如何告诉目录模块当前部分已更改。似乎不建议从列表缩减器调度操作。我不知道如何在目录模块中添加一个监听器，因为我不知道如何直接访问该存储。我只通过上下文在反应组件中有它。我正在使用react redux入门套件。

更新：我的源代码示例

TrackList/component.js
componentDidMount() {
    let {scrolled} = this.props;
    window.onScroll = scrolled;
}

TrackList/module.js
scrolled(state, action) {
  if (conditions) {
    new_state = make_directory_static_reducer(state);
  }
  else {
    new_state = make_directory_fixed_reducer(state);
  }

  let current_section = get_current_section();
  new_state = current_section_reducer(new_state, current_section);

  return new_state;
}

TrackDir/module.js
action_handlers = {
  set_current_section() {
    // I don't know how to run this when current section is set
  }
}

Answer 1

为了将来参考，查看代码的简化示例将非常有用。但我想我明白你的问题是什么，@ ming-soon有正确的想法：

因此，您尝试让FolderComponent了解源自不同组件的状态更改。完全可能。以下是数据流的快速描述以及Redux如何实现：

您的ListComponent检测到滚动事件并发送scrolled操作。
你的减速器运行并创建一个带有静态/固定标志的新状态（或者你在你的状态下拥有它）。
新状态通过您的应用传播到所有连接的组件，包括您的FolderComponent。
mapStateToProps为您的（已连接）FolderComponent调用，接收更新后的状态，并将静态/固定标志传递到props上的FolderComponent。
您的FolderComponent重新渲染，根据其props中的静态/固定标记进行适当的css更改。

如果这个流程没有意义，那么再去Redux Docs做一些阅读（他们真的很好）。特别要看看数据流和使用React部分。祝你好运！

Answer 2

最后，我将一些逻辑移到了组件上。现在，react组件本身处理onscroll事件并基于元素偏移，触发适当的操作。这甚至是正确的，因为它大大减少了模块和reducers之间传递的数据量，并且组件中的逻辑与呈现的HTML紧密耦合。

将操作中的数据传播到另一个reducer

2 个答案: