Redux 将数据从一个操作传播到另一个缩减器

Redux 将数据从一个操作传播到另一个缩减器,redux,Redux,我有一个特务。有两个组成部分。平面列表和嵌套目录。该列表有一个onscroll处理程序,用于发送“滚动”的操作。然后,reducer返回一个新状态,该状态反映目录的位置是静态的还是固定的,以及当前节是什么。现在,我不知道如何告诉目录模块当前部分已更改。似乎不建议从列表缩减器中分派操作。我不知道如何在目录模块中添加侦听器,因为我不知道如何直接访问存储。我只在通过上下文的react组件中有它。我正在使用react-redux初学者工具包 更新:我的源代码示例 TrackList/component.

我有一个特务。有两个组成部分。平面列表和嵌套目录。该列表有一个onscroll处理程序,用于发送“滚动”的操作。然后,reducer返回一个新状态,该状态反映目录的位置是静态的还是固定的,以及当前节是什么。现在,我不知道如何告诉目录模块当前部分已更改。似乎不建议从列表缩减器中分派操作。我不知道如何在目录模块中添加侦听器,因为我不知道如何直接访问存储。我只在通过上下文的react组件中有它。我正在使用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
  }
}

为便于将来参考,请看一个简化的代码示例。但我想我理解你的问题所在,@ming很快就有了正确的想法:

因此,您试图让您的FolderComponent意识到源自不同组件的状态更改。完全可能。下面是对数据流的快速描述,以及Redux是如何实现的:

  • ListComponent检测到一个滚动事件,并发送一个
    滚动的
    操作
  • 您的减速器运行并创建一个新的状态,该状态带有static/fixed标志(或者您在状态中使用的方式)
  • 新状态通过应用程序传播到所有连接的组件,包括FolderComponent
  • 调用(已连接)FolderComponent的
    MapStateTrops
    ,接收更新状态,并在
    props
    上将静态/固定标志传递到FolderComponent
  • 您的FolderComponent重新呈现,根据其
    道具中的static/fixed标志进行适当的css更改
    
    如果这个流程没有意义,那就去图书馆多读一些书(它们真的很好)。特别是查看React部分的数据流和使用情况。祝你好运

    最后,我将一些逻辑移到了组件中。现在,react组件本身处理onscroll事件,并根据元素偏移量触发适当的操作。这甚至感觉是对的,因为它大大减少了模块和还原程序之间传递的数据量,并且组件中的逻辑与呈现的HTML紧密耦合。

    您是否尝试过将React组件连接到Redux存储区的方法?当然,我就是这样将dispatchers和state连接到React组件的。但是当我说import{connect}来自'react redux';导出默认连接(将状态映射到道具,将调度映射到道具)(轨迹列表);仍然没有明显的方法访问模块中的存储。要更新存储,您需要调度一个操作。要从存储中获取值,可以使用
    connect()
    。通常,直接在组件中访问存储不是一个好主意。