1

私は自分の位置を適切に状態に保存できるようにするreact-router-reduxを使用しており、react-routerを使用してルートを定義し、ルート間のリンクを作成できるようにしています。

<Link />1 つの問題は、次のようなコンポーネントを使用してナビゲートする必要がある場合です。

<Link to={`/movie/${m.id}`}>
    <p>{m.name}</p>
</Link>

これにより、ルートの変更がトリガーされ、新しいルート (この場合は<Movie />ルート) の読み込み時に、ムービー ページの状態が読み込まれます。

新しいページはナビゲーションで空白になるか、ローダーを配置できますが、実際には新しいページの API 呼び出しが読み込まれるまで新しいページに移動しないため、これはページ間の遷移にはうまく機能しません。pitchfork.comやtheguardian.comなどのサイトに似ています。

この実装はこの質問で説明されており、ページ遷移間でローダーを使用するだけのアプローチがreal-world-exampleとreddit api の例で使用されています

私の質問は、ナビゲートする前に自分のサイトに新しいコンテナ/ルートの状態をロードしたい場合、この質問でdax chenが提案したアプローチに従う必要がありますか?

答えをまとめると、アクションを起動し、redux-thunk を使用して、新しいコンテナー/ルートのアクションを呼び出して状態をプリロードできます。完了したら、react-router-redux のpush()アクションを使用してページに移動します。

store.dispatch(push('/foo'))

これが移行前にページをプリロードするための推奨されるアプローチである場合、このアプローチを使用するようにreact-router-redux-exampleと現在のサイトを変更します。

新しいルートのデータをロードしてナビゲートするアクションは、次のようになります。

function fetchInit(url, id, to) {
  return dispatch => {
    return dispatch(fetchMovie(url, id))
      .then(function(home) {
        return dispatch(push(to))
      })
  }
}

呼び出す新しいコンテナーのアクションと、ナビゲートする新しいパスを識別するためのロジックが必要になります。fetchData()新しいページのコンテナ コンポーネントで静的メソッドを呼び出すことができます。

したがって、これはコンポーネントをやや複雑にし<Link />ます。これが正しい方法であるかどうかについてのアドバイスを探しているだけです。または、より単純で推奨されるアプローチを見逃している可能性があります。

<Link onClick={ () => dispatch(navigate(`/movie/${m.id}`, 'Movie')) } >
    <p>{m.name}</p>
</Link>
4

1 に答える 1

0

これを解決する実装を作成しました。任意のタイプのカスタム リンク コンポーネントを作成して、好きなように動作させることができます。ユーザーはルート遷移を即時にしたいので、ルート。より良いアプローチは、 pitchfork.comで行われているのと同様に、適切なローダーを使用してページのデザインにうまく組み込むことです。また、redis、memcached などのキャッシングを使用して API からデータが迅速に返されるようにします。

これは、カスタムの react-router-redux リンク コンポーネントを表示するために作成したライブラリです: https://github.com/StevenIseki/react-router-redux-link

于 2016-06-30T14:07:48.817 に答える