Tengo el problema de que recibo en mi componentDidUpdate(prevProps, prevState) una nueva referencia del objeto en el this.props entrante, por lo que incluso los valores son iguales, obtengo comparaciones de objetos engañosas cuando comparo this.props con el objeto prevProps . Para rastrear esto, me gustaría saber por qué sucede esto y creo que se debe a la derivación de datos con selectores .

Entonces, considere el escenario típico

 class FooComponent extends Component { constructor(props) { super(props) } .... } const mapStateToProps = (state, props) => ({ stateSlice: getStateSlice(state) } const mapDispatchToProps = (dispatch) => ({ ... }) export default connect(mapStateToProps, mapDispatchToProps)(FooComponent))

Para el escenario de una aplicación compleja, un estado global grande y una función getStateSlice compleja, me gustaría saber si se ha creado una nueva referencia.

Traté de comparar getStateSlice(state) con state.stateSlice en mapStateToProps con una función refCheck como esta:

 function refCheck(state, props) { if (props.stateSlice === getStateSlice(state)) { console.log('sameRef!!'); } return getStateSlice(state); } const mapStateToProps = (state, props) => ({ stateSlice: refCheck(state) }

Y todo funciona, pero sigo obteniendo los mismos accesorios de valor en ComponentDidUpdate() y una referencia diferente. Prof si esto es lo que obtengo en el componentDidUpdate(prevProps, prevState)

 prevProps === this.props: false JSON.stringify(prevProps) === JSON.stringify(this.props): true

¿Cómo puedo verificar si se crea una nueva referencia para evaluar si un selector funciona correctamente y no crea una nueva referencia en el paso de recuperación de información de estado para los mismos valores por error? También sería útil poder verificar eso en el nivel del reductor y registrar si el reductor está creando una nueva referencia o no.