56

最新のアプリで react-router と 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 が変更されたときに新しい props をハンドラーに渡すため、react-router からの URL 変更に応答するために componentWillReceiveProps ライフサイクル メソッドを使用しています。このアプローチの主な問題は、このメソッドでアクションを起動して状態を更新していることです-その後、同じライフサイクルメソッドを再度トリガーするコンポーネントに新しい小道具を渡します-したがって、基本的に無限ループを作成します。現在、私は状態変数を使用して、これが起こらないようにします。

  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);
    }
  }

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

4

2 に答える 2

39

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

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

秘訣は、ルーターの場所が変わるたびに起動するアクション タイプを作成することです。これは、React Router の今後の 1.0 バージョンでは簡単です。

// 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() のような命令型パターンを使用する同じ機能よりもはるかに単純です。

于 2015-07-09T08:30:38.387 に答える
9

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

1) ルーティング情報を状態にリンクする

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

routingすべてが設定されると、次のような状態になるはずです。

州

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)、ハンドラー内で行う必要があります。

于 2016-06-19T18:27:54.143 に答える