Redux 将数据从一个操作传播到另一个缩减器
我有一个特务。有两个组成部分。平面列表和嵌套目录。该列表有一个onscroll处理程序,用于发送“滚动”的操作。然后,reducer返回一个新状态,该状态反映目录的位置是静态的还是固定的,以及当前节是什么。现在,我不知道如何告诉目录模块当前部分已更改。似乎不建议从列表缩减器中分派操作。我不知道如何在目录模块中添加侦听器,因为我不知道如何直接访问存储。我只在通过上下文的react组件中有它。我正在使用react-redux初学者工具包 更新:我的源代码示例Redux 将数据从一个操作传播到另一个缩减器,redux,Redux,我有一个特务。有两个组成部分。平面列表和嵌套目录。该列表有一个onscroll处理程序,用于发送“滚动”的操作。然后,reducer返回一个新状态,该状态反映目录的位置是静态的还是固定的,以及当前节是什么。现在,我不知道如何告诉目录模块当前部分已更改。似乎不建议从列表缩减器中分派操作。我不知道如何在目录模块中添加侦听器,因为我不知道如何直接访问存储。我只在通过上下文的react组件中有它。我正在使用react-redux初学者工具包 更新:我的源代码示例 TrackList/component.
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是如何实现的:
滚动的
操作MapStateTrops
,接收更新状态,并在props
上将静态/固定标志传递到FolderComponent道具中的static/fixed标志进行适当的css更改李>
如果这个流程没有意义,那就去图书馆多读一些书(它们真的很好)。特别是查看React部分的数据流和使用情况。祝你好运 最后,我将一些逻辑移到了组件中。现在,react组件本身处理onscroll事件,并根据元素偏移量触发适当的操作。这甚至感觉是对的,因为它大大减少了模块和还原程序之间传递的数据量,并且组件中的逻辑与呈现的HTML紧密耦合。您是否尝试过将React组件连接到Redux存储区的方法?当然,我就是这样将dispatchers和state连接到React组件的。但是当我说import{connect}来自'react redux';导出默认连接(将状态映射到道具,将调度映射到道具)(轨迹列表);仍然没有明显的方法访问模块中的存储。要更新存储,您需要调度一个操作。要从存储中获取值,可以使用connect()
。通常,直接在组件中访问存储不是一个好主意。