Soy bastante nuevo en reaccionar y reducir y he tenido problemas para acceder a mis acciones de reducción desde los accesorios cuando se usan junto con el enrutador de reacción. He intentado muchas configuraciones para formatear, pero no importa lo que intente, los accesorios solo tienen las funciones del enrutador de reacción, es decir, historial, coincidencia y ubicación. Estoy usando el enrutador de reacción conectado pero no parece estar haciendo nada. He podido acceder a las acciones de redux desde los componentes de mi menú de navegación, así que no creo que haya ningún problema allí.
Aquí hay una muestra de la última configuración que probé:
const mapStateToProps = (state) => { return { isSignedIn: state.auth.isSignedIn } } const ConnectedApp = connect( mapStateToProps, { signOut, signIn } )(App); ReactDOM.render( <Provider store={store}> <ConnectedRouter basename={baseUrl} history={history}> <ConnectedApp /> </ConnectedRouter> </Provider>, rootElement);y aquí está dentro de la aplicación:
class App extends Component { static displayName = App.name; render () { return ( <Layout> <Route exact path='/' component={(props) =><Home {...props}/>} /> <Route exact path='/LogInExisting' component={(props) => <LogInExisting {...props} />} /> <Route exact path='/LogInCreate' component={(props) => <LogInCreate {...props} />} /> </Layout> ); } }Y esto es lo que intenta acceder a la acción de inicio de sesión:
const LogInExisting = (props) => { const history = useHistory(); const handleSignIn = async (e) => { e.preventDefault() var data = { UserName: document.getElementById('login').value, Password: document.getElementById('password').value } var response = await fetch('LogInExistingUser', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }); var respData = await response.json(); if (!respData.success) { //TODO: Error handling } else { props.signIn(); history.push('/') } }Siento que me estoy perdiendo algo obvio, pero realmente me vendría bien un poco de ayuda.
Está pasando las propiedades de la ruta ( history , location y match ) cuando usa la función de propiedad del componente del component Route .
<Route exact path='/LogInExisting' component={(props) => <LogInExisting {...props} />} /> Falta el paso de los accesorios que se pasaron a la App .
<Route exact path='/LogInExisting' component={(routeProps) => <LogInExisting {...routeProps} {...this.props} />} /> No desea utilizar una función anónima en el accesorio del component , ya que volverá a montar el componente enrutado cada vez que se renderice la App . En su lugar, use la función render prop, está diseñada para este caso de uso. Consulte Métodos de representación de rutas para obtener una explicación más detallada.
<Route exact path='/LogInExisting' render={(routeProps) => <LogInExisting {...routeProps} {...this.props} />} /> Sin embargo, dicho esto, está utilizando Redux, que se construye utilizando la API React Context , que resuelve el problema de la "perforación de accesorios". No deberías pasar tu estado redux y tus acciones como accesorios como este. Envuelva sus componentes enrutados en el HOC de connect localmente.
<Route exact path='/LogInExisting' component={LogInExisting} />Iniciar SesiónExistente
const mapStateToProps = (state) => ({ isSignedIn: state.auth.isSignedIn, }); const mapDispatchToProps = { signOut, signIn }; export default connect(mapStateToProps, mapDispatchToProps)(LogInExisting); Dado que LogInExisting es un componente de función, puede usar los ganchos useDispatch y useSelector en lugar del HOC de connect .
import { useDispatch, useSelector } from 'react-redux'; import { signIn } from '../path/to/actions'; const LogInExisting = (props) => { const dispatch = useDispatch(); const isSignedIn = useSelector(state => state.auth.isSignedIn); const history = useHistory(); const handleSignIn = async (e) => { e.preventDefault(); ... if (!respData.success) { //TODO: Error handling } else { dispatch(signIn()); history.push('/'); } }