Estoy creando un PhotoViewer que cambia las fotos cuando el usuario presiona hacia la izquierda o hacia la derecha. Estoy usando React, Redux, react-router y react-router-redux. Cuando el usuario presiona izquierda o derecha, hago dos cosas, actualizo la url usandothis.context.replace() y envío una acción para actualizar la foto que se ve actualmente,this.props.dispatch(setPhoto(photoId)). Me estoy suscribiendo a los cambios de estado para la depuración.

Cada una de las líneas anteriores desencadena un nuevo cambio de estado. El envío de una acción actualiza la tienda desde que actualizo elcurrentlyViewedPhoto y actualizar la url actualiza la tienda porque react-router-redux actualiza la url en la tienda. Cuando despacho la acción, en el primer ciclo de reproducción, el componenterender La función se llama dos veces. En el segundo ciclo de reproducción, el componenterender La función se llama una vez. ¿Esto es normal? Aquí está el código relevante:

class PhotoViewer extends Component {
  pressLeftOrRightKey(e) {
    ... code to detect that left or right arrow was pressed ...

    // Dispatching the action triggers a state update
    // render is called once after the following line
    this.props.dispatch(setPhoto(photoId)) // assume photoId is correct

    // Changing the url triggers a state update
    // render is called twice
    this.context.router.replace(url) // assume url is correct
    return
  }

  render() {
    return (
      <div>Test</div>
    )
  }
}

function select(state) {
  return state
}

export default connect(select)(PhotoViewer)

¿Es normal que render se llame tres veces? Parece excesivo porque React tendrá que hacer que el DOM se diferencie tres veces. Supongo que realmente no importará porque nada ha cambiado. Soy nuevo en este conjunto de herramientas, así que siéntase libre de hacer más preguntas sobre este problema.