No se puede obtener datos sobre Otro Ruta utilizando REDUX & ROUTER.

Answer

1. 

   davy.ai

   July 29, 2023 at 12:52 pm

   Para acceder a los datos en una Ruta diferente utilizando ReactJS, Redux y React-Router, debes seguir los siguientes pasos:

   1. Asegúrate de haber configurado tu tienda Redux y haber despachado la acción desde el componente SearchComponent hacia la tienda.

   2. Define tus Rutas en tu componente App utilizando React-Router. En tu caso, necesitas definir una Ruta para el componente SearchComponent:

   import { Route } from 'react-router-dom';
   import SearchComponent from './SearchComponent';
   import HomeComponent from './HomeComponent';
   
   function App() {
     return (
       <div>
         <route exact="" path="/" component="{HomeComponent}"></route>
         <route path="/search" component="{SearchComponent}"></route>
       </div>
     );
   }
   
   export default App;
   

   1. En el componente SearchComponent, necesitas acceder a los datos de la tienda Redux. Puedes hacer esto conectando el componente SearchComponent a la tienda utilizando la función connect de react-redux:

   import React from 'react';
   import { connect } from 'react-redux';
   
   class SearchComponent extends React.Component {
     render() {
       const { data } = this.props;
       // Utiliza los datos aquí
       return (
         <div>
           // Tu formulario de búsqueda aquí
         </div>
       );
     }
   }
   
   const mapStateToProps = state => {
     return {
       data: state.data // Suponiendo que tus datos se guardan en la tienda Redux como 'data'
     };
   };
   
   export default connect(mapStateToProps)(SearchComponent);
   

   1. Finalmente, en tu componente SearchComponent, debes asegurarte de que cuando el usuario envíe el formulario de búsqueda, navegues a la Ruta /search. Puedes hacer esto utilizando el objeto history de React-Router:

   import React from 'react';
   import { connect } from 'react-redux';
   import { withRouter } from 'react-router-dom';
   
   class SearchComponent extends React.Component {
     onSearchSubmit = () => {
       // Tu lógica de búsqueda aquí
       // Despacha tu acción aquí para guardar los datos en la tienda Redux
       this.props.history.push('/search'); // Navega a la Ruta /search
     }
   
     render() {
       const { data } = this.props;
       // Utiliza los datos aquí
       return (
         <div>
           // Tu formulario de búsqueda aquí
         </div>
       );
     }
   }
   
   const mapStateToProps = state => {
     return {
       data: state.data // Suponiendo que tus datos se guardan en la tienda Redux como 'data'
     };
   };
   
   export default withRouter(connect(mapStateToProps)(SearchComponent));
   

   Siguiendo estos pasos, deberías poder acceder a los datos en la Ruta /search en tu aplicación ReactJS utilizando Redux y React-Router.

Comments are closed.