web-dev-qa-db-ja.com

アクションがディスパッチされた後にReduxストアで特定のプロパティの変更をリッスンする方法

現在、別のコンポーネントでのディスパッチ後のデータ変更に基づいて、コンポーネントでアクションをディスパッチする方法を概念化しようとしています。

このシナリオを見てください：

dispatch(someAjax)->状態更新のプロパティ。

この後、この同じプロパティに依存する別のコンポーネントが更新されたことを知り、新しい値に基づいてアクションをディスパッチする必要があります。

何らかのタイプのvalue.on(change...ソリューションを使用するのではなく、このタイプのアクション「カスケード」を処理するための好ましい方法は何ですか？

reactjsreduxredux-thunk
50
Jazzy

2つの基本的なアプローチがあります。アクションが完了した後に状態を比較するミドルウェア、またはReduxの低レベルstore.subscribe AP​​Iを使用するミドルウェアです。

Redux FAQには これをカバーする回答 があります。また、Reduxに関連するアドオンとユーティリティの分類されたリストを保持します。これには、データ変更をリッスンするためのさまざまなアプローチを実装する 既存のストア変更サブスクリプションライブラリ のグループが含まれます。

41
markerikson

ReduxのmapStateToPropsおよびconnectをReactのcomponentDidUpdate(prevProps, prevState, snapshot)フックとともに使用できます。

したがって、基本的にコードは次のようになります。

const mapStateToProps = (state) => ({ 
   specificProperty: state.specificProperty,
   // any props you need else
});

class YourComponent extends React.Component {
    render() {
      // render your component  
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        if (prevProps.specificProperty !== this.props.specificProperty) {
            // Do whatever you want
        }
    }
}

YourComponent = connect(mapStateToProps)(YourComponent);
70
PinkiNice