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

我有一个自定义滚动条。有两个组件。平面列表和嵌套目录。该列表有一个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 
    } 
}

来源

2017-03-03 Sixtease

你试过['connect（）']（https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options）方法来连接你的将组件反应到Redux商店？ –

当然，这就是我将调度员和状态连接到反应组件的方式。但是当我说从'react-redux'导入{connect};导出默认连接（map_state_to_props，map_dispatch_to_props）（TrackList）;仍然没有明显的方式访问该模块中的商店。 – Sixtease

要更新商店，您需要发送一个操作。要从商店获得价值，你可以使用'connect（）'。通常，直接在组件中访问商店不是一个好主意。 –

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

来源

2017-03-27 17:07:43 Sixtease

以供将来参考样本，这将是非常有益的，看看你的代码的简化例子。但我想我明白你的问题是什么，而@明很快就有正确的想法：

所以你试图让你的FolderComponent知道源自不同组件的状态改变。完全可能。下面是数据流的简要描述以及Redux如何实现它：

您的ListComponent检测到一个滚动事件并分派一个scrolled操作。
您的缩减器运行并创建一个完整的静态/固定标志（或您的状态）。
新状态通过您的应用程序传播到所有连接的组件，包括您的FolderComponent。
mapStateToProps您的（连接的）FolderComponent被调用，接收更新后的状态，并将静态/固定标志传递到您的FolderComponent上props。
您的FolderComponent重新渲染，根据其props中的静态/固定标志进行相应的CSS更改。

如果这个流程没有意义，那么请在Redux Docs（他们真的很好）做更多的阅读。尤其要看数据流和使用反应部分。祝你好运！

来源

2017-03-03 19:29:21 Ian

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

回答

相关问题