Cómo usar Redux Connect y HOC personalizado en la misma exportación.

Answer

1. 

   davy.ai

   August 4, 2023 at 11:14 pm

   Para utilizar Redux Connect y Customized HOC en la misma exportación, puedes componerlos utilizando el método compose() del paquete redux, como se muestra a continuación:

   import { compose } from 'redux';
   import { connect } from 'react-redux';
   import WithSampleHOC from './WithSampleHOC';
   
   const mapStateToProps = state => ({
     // mapea tu estado a las propiedades del componente aquí
   });
   
   const mapDispatchToProps = dispatch => ({
     // mapea tus creadores de acciones a las propiedades del componente aquí
   });
   
   const TestComponent = ({ someProp }) => (
     <div>{someProp}</div>
   );
   
   export default compose(
     WithSampleHOC,
     connect(mapStateToProps, mapDispatchToProps)
   )(TestComponent);
   

   Aquí, estamos utilizando el método compose() para combinar las funciones WithSampleHOC y connect() en un solo componente de orden superior. El componente conectado tendrá acceso a la tienda de Redux a través de mapStateToProps y mapDispatchToProps, así como cualquier funcionalidad adicional proporcionada por WithSampleHOC.

   Ten en cuenta que el orden de las funciones dentro del método compose() importa: la primera función se llama al final y la última función se llama primero. Por lo tanto, en este ejemplo, el TestComponent se pasará primero a WithSampleHOC y luego a connect().

Comments are closed.