javascript - drom - react router redux



Comment récupérer les nouvelles données en réponse à React Router changer avec Redux? (2)

J'utilise Redux, redux-router et reactjs.

J'essaie de faire une application où j'obtiens des informations sur le changement de route, 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 veux chercher l'artiste et ensuite rendre l'information. La question est, quelle est la meilleure façon de le faire?

J'ai trouvé des réponses à ce sujet, en utilisant RxJS ou en essayant un middleware pour gérer les requêtes. Maintenant, ma question est, est-ce vraiment nécessaire ou juste un moyen de garder l'architecture réagissent-agnostique? Puis-je simplement récupérer les informations dont j'ai besoin pour réagir à la place de componentDidMount () et componentDidUpdate ()? À l'heure actuelle, je le fais en déclenchant une action dans les fonctions qui demandent des informations et le composant qui redevient lorsque l'information est arrivée. Le composant a quelques propriétés pour me faire savoir que:

{
    isFetching: true,
    entity : {}
}

Merci!


Answer #1

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

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


Answer #2

1) envoi d'actions de requêtes optimistes sur les changements d'itinéraire, par exemple BrowserHistory.listen(location => dispatch(routeLocationDidUpdate(location)));

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





redux