Mi aplicación ha usado Redux durante mucho tiempo, y las exportaciones de componentes parecen
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent); Ahora estoy presentando la biblioteca de traducción de i18n y me gustaría usar el HOC que se incluye con useTranslation .
Intenté algunas formas diferentes y vi que Redux tiene una función de connect que se supone que combina HOC si entiendo correctamente, sin embargo, no puedo hacer que esto funcione.
export default connect(useTranslation(), connect(mapStateToProps, mapDispatchToProps))(MyComponent);Cuando cargo el navegador me muestra:
Error de referencia no capturado: el proceso no está definido
¿Me estoy perdiendo de algo?
useTranslation no es un HOC, quiere withTranslation . Eso se verá así:
export default connect(mapStateToProps, mapDispatchToProps)(withTranslation()(MyComponent));O, dado que el orden no importa:
export default withTranslation()(connect(mapStateToProps, mapDispatchToProps)(MyComponent)); Anidar múltiples HOC puede ser difícil de leer, por lo que puede ser más fácil usar una compose de utilidad de redacción. Redux incluso incluye uno:
import { compose, connect } from 'redux'; //... export default compose( connect(mapStateToProps, mapDispatchToProps), withTranslation() )(MyComponent);