1

私のアプリケーションの状態の一部を店舗からURLに移動しています。セレクタ内のルータの反応状態に反応する

私は現在、reduxを使用してreselectと一緒に自分のアプリの状態を管理しており、セレクタを作成しています。セレクタはreduxストア内の状態から派生した値を計算します(原則として、これが唯一の入力です)。

ここで、状態の一部がURLに含まれるようになりました。そのため、どのように読むべきかわかりません。

私は一目見ただけで解決策になると思われるかもしれない、react-router-redux見てきました(実際、私はstate.routing.locationBeforeTransitions.queryを使用したい値を取得することができます)が、これはそれを行うには正しい方法ではないようです彼らの文書でそれが与えられたとします:

Reduxストアから直接場所の状態を読み取るべきではありません。

私のロケーションステートにアクセスできる別の方法がありますか、この警告を無視してセレクタで使用する必要がありますか?

+0

mapStateToPropsからルータのパラメータにアクセスする必要がありますか? –

+0

@Utroそこからセレクタが呼び出されますが、セレクタの1つの引数stateオブジェクトだけを渡すという考えがあります。私はルータから必要なものをownPropsを使って状態オブジェクトに追加することができると思います... –

+0

1)mapStateToPropsのownProps.paramsを取得する2)コンポーネント内で 'this.props.params.someparam'をアクションに渡す3)あなたのルータの状態を店内に保つ 'redux-router'を使用します。 –

答えて

2

react-router-reduxドキュメントでは、このようにルータの状態を取得することを推奨しているようです。

セレクタは、通常、最初の引数(状態)のみを使用しますが、実際には2番目の引数(コンポーネントの小道具)を使用できます。これらの小道具の中には、がリアクタールーターによって渡されていることがわかります(彼らはconnectにしようとしているコンポーネントに渡されていると仮定します)。

私がやっているのはlocationの大文字ですが、stateを使ってReduxから物事を取り出すために他のセレクタを含むセレクタを複雑にすることは想像できます格納。

const selectLocation = (_state, props) => props.location; 
const selector = createSelector(
    selectLocation, 
    (location) => ({ upperCasedLocation: location.toUpperCase() }) 
); 

const MySmartComponent = (props) => <div>{props.upperCasedLocation}</div>; 

export default connect(selector)(MySmartComponent); 
関連する問題