反応ルータのonEnterフックからreduxストアに接続するにはどうすればいいですか？

Question

ルートロード時にreact-routerのonEnterフックを使用して私のreduxストア内の変数をチェックしたいと思います。ドキュメント、onEnterによる

：

...は、最初の引数として、次のルータの状態を受け取ります。 replaceState関数を使用して、別のURLへの遷移をトリガすることができます。

ストアが渡されません。このフック内からreduxストアに接続することは可能ですか？私はあらゆる種類のことを試しましたが、これを達成する方法を見つけることはできません。例えば

"react-redux": "^4.0.0", 
"react-router": "1.0.0-rc1", 
"redux": "^3.0.0", 

Answer 1

で状態を読み、あなたのルートのパラメーターに店舗をとる関数

export default (store) => { 
return (
    <Route handler={App} path="/"> 
    <Route path="mypath" component={handler} onEnter={myHook(store)}> 
    <Route> 
) 
}; 

はあなたの移行フック

で同じ操作を行います作ります

export const myHook = (store) => { 
    return (location, replaceWith) => { 
    // Do something with your store 
    } 
}; 

次に、店舗とルータを同じ場所に作成すると仮定しますルータmigration documentationに反応する

const router = (
      <Provider store={store}> 
       <Router history={history}> 
        {routes(store)} 
       </Router> 
      </Provider> 
     ); 

Answer 2

をあなたは、ファイルstore.jsと輸出最終ストアを作成することができます（同じあなたが再来に渡す）

：私が使用している

バージョンその後、

import configureStore from 'utils/configure-store.js'; 

const store = configureStore(); 
export default store; 

とルーターのファイルにインポートし、store.getState()

Answer 3

バージョン4ファイルの変更を処理するために、あなたのコンポーネントのライフサイクルメソッドを使用することをお勧めします。

たとえば、onEnterの代わりにcomponentWillMountを使用するか、componentWillReceivePropsで状態の変化に対応します。

だからあなたのコンポーネント自体に：ボーナスポイント

import { browserHistory } from 'react-router'; 

... 

componentWillMount() { 
    if (someConditionIsTrue) { 
    browserHistory.push('/your/new/path'); 
    } 
} 

単にあなたの元のコンポーネントをラップHigher Order Componentとしてこれを書くことができます。同じロジックを必要とする他のコンポーネント間でこのロジックを共有するのが簡単になります。