アクションから別のレデューサーにデータを伝播

Question

私はカスタムスクロールバーを持っています。 2つのコンポーネントがあります。フラットリストとネストされたディレクトリ。このリストには、アクション「スクロール」を送出するonscrollハンドラがあります。減速機は、ディレクトリが静的か固定かを示す新しい状態と、現在のセクションが何であるかを返します。現在、私はディレクトリモジュールに現在のセクションが変更されたことを伝える方法を知らない。リスト・レデューサーからアクションをディスパッチすることはお勧めできません。ディレクトリモジュールにリスナーを追加する方法はわかりません。店に直接アクセスする方法がわからないからです。私は文脈を通して反応成分にしか持っていません。私は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

最後に、私はいくつかのロジックをコンポーネントに移動しました。反応コンポーネント自体がonscrollイベントを処理し、要素のオフセットに基づいて、適切なアクションを実行します。モジュールとレデューサーの間を通過するデータの量が大幅に減り、コンポーネント内のロジックがレンダリングされたHTMLと密接に結合されているため、これは正しく感じられます。

Answer 2

のサンプルが、あなたのコードの簡単な例を参照することは非常に参考になります。しかし、私はあなたの問題が何であるかを理解していると思います。@ ming-soonは正しいアイデアを持っています。

これで、FolderComponentが異なるコンポーネントで発生した状態変化を認識しようとしています。完全に可能です。

1. ListComponentはスクロールイベントを検出し、scrolledアクションをディスパッチします。
2. あなたのレデューサーが実行され、静的/固定フラグを含む新しい状態が作成されます（またはあなたの状態になります）。
3. 新しい状態は、あなたのアプリケーションを介して、FolderComponentを含むすべての接続されたコンポーネントに伝播します。
4. mapStateToProps（接続された）FolderComponentが呼び出され、更新された状態を受け取り、propsのFolderComponentに静的/固定フラグを渡します。
5. FolderComponentが再レンダリングされ、propsのstatic/fixedフラグに基づいて適切なCSSが変更されます。

フローが意味をなさない場合は、Redux Docsでもう少し読んでみてください（彼らは本当に良いです）。特に「データフローと反応を伴う使用」セクションを参照してください。がんばろう！