web-dev-qa-db-ja.com

Reactルーターでのルート遷移に応じたReduxアクションの起動

私は最新のアプリで反応ルーターとリデュースを使用していますが、現在のURLパラメーターとクエリに基づいて必要な状態変更に関連するいくつかの問題に直面しています。

基本的に、URLが変更されるたびに状態を更新する必要があるコンポーネントがあります。状態は、そのようなデコレータでreduxによって小道具を介して渡されています

 @connect(state => ({
   campaigngroups: state.jobresults.campaigngroups,
   error: state.jobresults.error,
   loading: state.jobresults.loading
 }))

現時点では、react-routerはthis.props.paramsおよびthis.props.queryでURLが変更されると、react-routerがハンドラーに新しいプロパティを渡すため、componentWillReceivePropsライフサイクルメソッドを使用して、react-routerからのURL変更に応答しています。このアプローチの主な問題は、このメソッドでアクションを起動して状態を更新することです-その後、同じライフサイクルメソッドを再びトリガーするコンポーネントに新しい小道具を渡します-基本的に無限ループを作成し、現在これを防ぐための状態変数。

  componentWillReceiveProps(nextProps) {
    if (this.state.shouldupdate) {
      let { slug } = nextProps.params;
      let { citizenships, discipline, workright, location } = nextProps.query;
      const params = { slug, discipline, workright, location };
      let filters = this._getFilters(params);
      // set the state accroding to the filters in the url
      this._setState(params);
      // trigger the action to refill the stores
      this.actions.loadCampaignGroups(filters);
    }
  }

ルートの遷移に基づいてアクションをトリガーする標準的なアプローチはありますかOR小道具を通して渡すのではなく、ストアの状態をコンポーネントの状態に直接接続できますか？ willTransitionTo静的メソッドを使用しますが、this.props.dispatchにアクセスできません。

reactjsreduxreact-router
53
deowk

さて、私は最終的にreduxのgithubページで答えを見つけたので、ここに投稿します。それが誰かの苦痛を救うことを願っています。

@deowkこの問題には2つの部分があります。 1つ目は、componentWillReceiveProps（）が状態の変化に対応するための理想的な方法ではないことです。これは、主にReduxのように事後的にではなく、命令的に考えることを強いるからです。解決策は、現在のルーター情報（場所、パラメーター、クエリ）をストア内に保存することです。その後、すべての状態は同じ場所にあり、残りのデータと同じRedux APIを使用して状態にサブスクライブできます。

トリックは、ルーターの場所が変更されるたびに起動するアクションタイプを作成することです。 Reactルーター：

// routeLocationDidUpdate() is an action creator
// Only call it from here, nowhere else
BrowserHistory.listen(location => dispatch(routeLocationDidUpdate(location)));

これで、ストアの状態は常にルーターの状態と同期します。これにより、上記のコンポーネントでクエリパラメータの変更とsetState（）に手動で反応する必要がなくなります。Reduxのコネクタを使用するだけです。

<Connector select={state => ({ filter: getFilters(store.router.params) })} />

問題の2番目の部分は、ビューレイヤーの外部でReduxの状態の変化に対応する方法、つまり、ルートの変化に応じてアクションを起動する方法が必要なことです。必要に応じて、記述したような単純なケースに対してcomponentWillReceivePropsを引き続き使用できます。

ただし、もっと複雑なことについては、RxJSを使用することをお勧めします。これは、オブザーバブルがリアクティブデータフローのために設計されたものです。

Reduxでこれを行うには、まず、観測可能なストア状態のシーケンスを作成します。これは、rxのobservableFromStore（）を使用して実行できます。

推奨される編集 [〜＃〜] cnp [〜＃〜]

import { Observable } from 'rx'

function observableFromStore(store) {
  return Observable.create(observer =>
    store.subscribe(() => observer.onNext(store.getState()))
  )
}

次に、観察可能な演算子を使用して特定の状態の変更をサブスクライブするだけです。ログイン成功後にログインページからリダイレクトする例を次に示します。

const didLogin$ = state$
  .distinctUntilChanged(state => !state.loggedIn && state.router.path === '/login')
  .filter(state => state.loggedIn && state.router.path === '/login');

didLogin$.subscribe({
   router.transitionTo('/success');
});

この実装は、componentDidReceiveProps（）などの命令型パターンを使用する同じ機能よりもはるかに単純です。

36
deowk

前述したように、ソリューションには2つの部分があります。

1）ルーティング情報を状態にリンクします

そのためには、 react-router-redux をセットアップするだけです。指示に従ってください、あなたは大丈夫です。

すべてを設定すると、次のようにrouting状態になります。

state

2）ルーティングの変更を観察し、アクションをトリガーします

コードのどこかに、今このようなものがあるはずです。

_// find this piece of code
export default function configureStore(initialState) {
    // the logic for configuring your store goes here
    let store = createStore(...);
    // we need to bind the observer to the store <<here>>
}
_

あなたがしたいことは、ストアの変化を観察することです。そのため、何かが変化したときにdispatchアクションを実行できます。

@deowkが言及したように、rxを使用するか、独自のオブザーバーを作成できます。

reduxStoreObserver.js

_var currentValue;
/**
 * Observes changes in the Redux store and calls onChange when the state changes
 * @param store The Redux store
 * @param selector A function that should return what you are observing. Example: (state) => state.routing.locationBeforeTransitions;
 * @param onChange A function called when the observable state changed. Params are store, previousValue and currentValue
 */
export default function observe(store, selector, onChange) {
    if (!store) throw Error('\'store\' should be truthy');
    if (!selector) throw Error('\'selector\' should be truthy');
    store.subscribe(() => {
        let previousValue = currentValue;
        try {
            currentValue = selector(store.getState());
        }
        catch(ex) {
            // the selector could not get the value. Maybe because of a null reference. Let's assume undefined
            currentValue = undefined;
        }
        if (previousValue !== currentValue) {
            onChange(store, previousValue, currentValue);
        }
    });
}
_

さて、あなたがしなければならないのは、変更を観察するために書いた_reduxStoreObserver.js_を使うことです：

_import observe from './reduxStoreObserver.js';

export default function configureStore(initialState) {
    // the logic for configuring your store goes here
    let store = createStore(...);

    observe(store,
        //if THIS changes, we the CALLBACK will be called
        state => state.routing.locationBeforeTransitions.search, 
        (store, previousValue, currentValue) => console.log('Some property changed from ', previousValue, 'to', currentValue)
    );
}
_

上記のコードは、locationBeforeTransitions.searchが状態を変更するたびに（ユーザーがナビゲートした結果として）関数が呼び出されるようにします。必要に応じて、queクエリ文字列などを観察できます。

ルーティングの変更の結果としてアクションをトリガーする場合は、ハンドラー内でstore.dispatch(yourAction)するだけです。

8
André Pena