web-dev-qa-db-ja.com

React Reduxによるルーターの変更に応答して新しいデータを取得する方法は？

Redux、redux-router、reactjsを使用しています。

私はルート変更に関する情報を取得するアプリを作成しようとしているので、次のようなものがあります：

<Route path="/" component={App}>
    <Route path="artist" component={ArtistApp} />
    <Route path="artist/:artistId" component={ArtistApp} />
</Route>

誰かがartist/<artistId>アーティストを検索して、情報を表示したい。問題は、これを行う最善の方法は何ですか？

RxJSを使用するか、リクエストを管理するためにミドルウェアを試すことについて、いくつかの答えを見つけました。さて、私の質問は、これは本当に必要なのか、それとも単にアーキテクチャを反応に依存しないようにする方法なのか？代わりに、react componentDidMount（）およびcomponentDidUpdate（）から必要な情報を取得できますか？現時点では、情報を要求する機能でアクションをトリガーし、情報が到着するとコンポーネントを再レンダリングすることでこれを行っています。このコンポーネントには、次のことを知らせるためのいくつかのプロパティがあります。

{
    isFetching: true,
    entity : {}
}

ありがとう！

javascriptreactjsreact-routerredux
47
Franco Risso

さて、私の質問は、これは本当に必要なのか、それとも単にアーキテクチャを反応に依存しないようにする方法なのか？代わりに、react componentDidMount（）およびcomponentDidUpdate（）から必要な情報を取得できますか？

componentDidMount()およびcomponentWillReceiveProps(nextProps)で完全に実行できます。
これは、私たちが real-world例 Reduxの場合：

function loadData(props) {
  const { fullName } = props;
  props.loadRepo(fullName, ['description']);
  props.loadStargazers(fullName);
}

class RepoPage extends Component {
  constructor(props) {
    super(props);
    this.renderUser = this.renderUser.bind(this);
    this.handleLoadMoreClick = this.handleLoadMoreClick.bind(this);
  }

  componentWillMount() {
    loadData(this.props);
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.fullName !== this.props.fullName) {
      loadData(nextProps);
    }

  /* ... */

}

Rxを使用するとより洗練されたものになりますが、まったく必要ありません。

60
Dan Abramov

このようなプレーンルーターonEnter/onLeaveコールバックプロップのカスタムバインディングでこれを行いました。

const store = configureStore()

//then in router
<Route path='/myRoutePath' component={MyRouteHandler} onEnter={()=>store.dispatch(myRouteEnterAction())} />

それは少しハックですが、動作し、私は今より良い解決策を知りません。

19
Victor Suzdalev

1）ルートの変更時に楽観的なリクエストアクションをディスパッチします。つまり、BrowserHistory.listen(location => dispatch(routeLocationDidUpdate(location)));

2）非同期アクション： http://redux.js.org/docs/advanced/AsyncActions.html

3
Dennis Krupenik