Una solución es manejar las acciones en los ciclos de vida de los componentes. Esta solución se aplicaría a los casos en que la acción que se dispara en la transición de ruta afecta sólo a los componentes actuales. En un componente de clase, podemos usar el componenteDidMount combinado con los eventos del componenteWillReceiveProps para tener el efecto deseado.
Supongamos una tienda Redux, configurada de la siguiente manera, junto con una acción que necesita ser disparada en la transición de ruta.
1234567891011121314151617/// reducer.jsimport{ACTION_TO_FIRE}from$0027./actions.js$0027const initialState ={// ... }exportdefaultfunctionappReducer(state, action){if(typeof state ===$0027undefined$0027){return initialState }switch(action.type){caseACTION_TO_FIRE:// haz algo con el payloadbreak;}javascript
123456789101112// actions.js// Estas son nuestras acciones typesexportconstACTION_TO_FIRE="ACTION_TO_FIRE"// Ahora definimos actionsexportfunctionfireThisAction(payload){return{ type:ACTION_TO_FIRE, payload }}javascript
Con esto, tengamos nuestro componente de clase que dispararía el fuego EstaAcción en la transición de ruta.
1234567891011121314151617181920212223242526272829303132333435363738394041424344// AppComponent.jsimportReact,{Componente}de$0027reaccionar$0027;importar{ conectar }de$0027reaccionar-reducir$0027importar{ conRouter }de$0027reaccionar-enrutar$0027importar{ dispararEstaAcción }de$0027. /acciones$0027;claseAplicaciónComponenteAmpliaComponente{componenteDidMount(){fuegoEstaAcción();}componenteRecibiráPropiedades(siguientePropiedades){si(este.props.ubicación.pathname=== siguientePropiedades.ubicación.pathname&&esto. props.location.search=== nextProps.location. search){// esto significa que no hay cambios en el camino, por lo que no necesitamos volver a referirnos a la// actionreturn;}// si no disparar el actionfireThisAction();}render(){return(// renderizar el contenido aquí después de cargar los datos); }}mapa de funciónStateToProps(state){retorno{}}const mapDispatchToProps ={ fuegoThisAction };exportar por defecto conRouter(connect(mapStateToProps, mapDispatchToProps)(AppComponent));javascript
Como se muestra en el ejemplo de código anterior, primero usamos el componenteDidMount para cargar los datos sobre la transición de la ruta. Pero para que funcione en todos los casos en los que el componente ya está montado (por ejemplo: cambio de ruta sin desmontar el componente), necesitamos anular el evento componentWillReceiveProps y ver si tenemos que volver a realizar la acción. Simplemente estamos comparando la ruta completa de la URL actual para determinar si debemos volver a referir la acción.
En una aplicación del mundo real, encontrará que sólo necesita comparar un determinado parámetro de ruta para determinar esto. Si consideramos el ejemplo de la entrada del blog anterior, necesitamos comprobar si el parámetro de ruta que indica la entrada («awesome-post») ha cambiado. Esto se logra fácilmente comparando el contenido de props.match.params.