javascript - link - ¿Cómo recuperar los nuevos datos en respuesta al cambio del React Router con Redux?

react training react router dom

Question

Estoy usando Redux, redux-router y reactjs.

Intento crear una aplicación donde obtenga información sobre el cambio de ruta, así que tengo algo como:

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

Cuando alguien ingresa en artist/<artistId> , quiero buscar al artista y luego renderizar la información. La pregunta es, ¿cuál es la mejor manera de hacer esto?

He encontrado algunas respuestas al respecto, usando RxJS o probando un middleware para administrar las solicitudes. Ahora, mi pregunta es, ¿es esto realmente necesario o solo una forma de mantener la arquitectura agnóstica? ¿Puedo obtener la información que necesito de reaccionar componentDidMount () y componentDidUpdate () en su lugar? En este momento estoy haciendo esto activando una acción en aquellas funciones que solicitan información y el componente vuelve a generar cuando la información ha llegado. El componente tiene algunas propiedades para decirme que:

{
    isFetching: true,
    entity : {}
}

¡Gracias!

Answer 1

Ahora, mi pregunta es, ¿es esto realmente necesario o solo una forma de mantener la arquitectura agnóstica? ¿Puedo obtener la información que necesito de reaccionar componentDidMount () y componentDidUpdate () en su lugar?

Puede hacerlo totalmente en componentDidMount() y componentWillReceiveProps(nextProps) .
Esto es lo que hacemos en real-world en 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);
    }

  /* ... */

}

Puede hacerse más sofisticado con Rx, pero no es necesario en absoluto.

Answer 2

1) despachar acciones de solicitud optimistas sobre cambios de ruta, es decir, BrowserHistory.listen(location => dispatch(routeLocationDidUpdate(location)));

2) Acciones asincrónicas: http://redux.js.org/docs/advanced/AsyncActions.html

Answer 3

He hecho esto con un enlace personalizado en el enrutador simple onEnter / onLeave apoyos de devolución de llamada de esta manera:

const store = configureStore()

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

Es un poco raro, pero funciona, y no sé mejor solución en este momento.