web-dev-qa-db-fra.com

Comment récupérer les nouvelles données en réponse à React Changement de routeur avec Redux?

J'utilise Redux, redux-router et reactjs.

J'essaie de créer une application où je récupère des informations sur le changement d'itinéraire, donc, j'ai quelque chose comme:

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

Quand quelqu'un entre dans artist/<artistId> Je souhaite rechercher l'artiste, puis rendre les informations. La question est, quelle est la meilleure façon de procéder?

J'ai trouvé quelques réponses à ce sujet, en utilisant RxJS ou en essayant un middleware pour gérer les demandes. Maintenant, ma question est la suivante: est-ce vraiment nécessaire ou simplement un moyen de garder l'architecture réactive-agnostique? Puis-je simplement récupérer les informations dont j'ai besoin à partir de react componentDidMount () et componentDidUpdate () à la place? En ce moment, je fais cela en déclenchant une action dans les fonctions qui demandent des informations et le composant est restitué lorsque les informations sont arrivées. Le composant a certaines propriétés pour me faire savoir que:

{
    isFetching: true,
    entity : {}
}

Merci!

javascriptreactjsreact-routerredux
47
Franco Risso

Maintenant, ma question est la suivante: est-ce vraiment nécessaire ou simplement un moyen de garder l'architecture réactive-agnostique? Puis-je simplement récupérer les informations dont j'ai besoin à partir de react componentDidMount () et componentDidUpdate () à la place?

Vous pouvez totalement le faire dans componentDidMount() et componentWillReceiveProps(nextProps).
C'est ce que nous faisons en real-world exemple dans 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);
    }

  /* ... */

}

Vous pouvez devenir plus sophistiqué avec Rx, mais ce n'est pas du tout nécessaire.

60
Dan Abramov

J'ai fait cela avec une liaison personnalisée sur les accessoires de rappel onEnter/onLeave du routeur comme celui-ci:

const store = configureStore()

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

C'est un peu hacky mais ça marche, et je ne connais pas de meilleure solution pour le moment.

19
Victor Suzdalev

1) l'envoi d'actions de requête optimistes sur les changements de route, c'est-à-dire BrowserHistory.listen(location => dispatch(routeLocationDidUpdate(location)));

2) Actions asynchrones: http://redux.js.org/docs/advanced/AsyncActions.html

3
Dennis Krupenik