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.