カスタム スクロールスパイがあります。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
}
}
最終的に、いくつかのロジックをコンポーネントに移動しました。反応コンポーネント自体が onscroll イベントを処理し、要素のオフセットに基づいて適切なアクションを起動するようになりました。これは、モジュールとレデューサーの間でやり取りされるデータの量を大幅に削減し、コンポーネントのロジックがレンダリングされた HTML と非常に密接に結びついているので、正しいとさえ感じます。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加