將數據從動作傳播到另一個縮減器

我有一個自定義滾動條。有兩個組件。平面列表和嵌套目錄。該列表有一個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

將數據從動作傳播到另一個縮減器

回答

相關問題