Te damos la bienvenida a proyecto on line, ahora vas a hallar la solucíon de lo que estabas buscando.
Solución:
A partir de la versión 7.x, react-redux ahora tiene ganchos para componentes funcionales
const store = useSelector(store => store)
Para que podamos usar el componente funcional con la tienda redux como componente de clase.
consulte el siguiente enlace para obtener más ideas sobre los ganchos
https://react-redux.js.org/next/api/hooks
Se recomienda usar componentes funcionales para los componentes que tienen conexión e interacción con la tienda Redux ya que aquellos componentes que interactúan con la tienda no tienen estado localmente.
Sí, se recomienda usar componentes funcionales con reduxy hay una manera de tener un estado local en un componente funcional.
¿Por qué se recomiendan los componentes funcionales?
El ecosistema de reacción se mueve hacia el uso de anzuelos, lo que significa estandarizar los componentes funcionales.
Como se indica en los documentos sobre usos de ganchos o clases:
A más largo plazo, esperamos que los Hooks sean la forma principal en que las personas escriben componentes de React.
¿Cómo tener un estado local en componentes funcionales con redux?
Redux introdujo la API redux-hooks que brinda componentes funcionales la capacidad de usar el estado del componente local y permite suscribirse a la tienda Redux sin envolver sus componentes con connect().
- usarSelector
- usoDespacho
- usarTienda
// Creating a store
const store = createStore(rootReducer)
ReactDOM.render(
,
document.getElementById('root')
)
// CounterComponent.jsx Selector example
import React from 'react'
import useSelector from 'react-redux'
export const CounterComponent = () =>
// Using the store localy with a selector.
const counter = useSelector(state => state.counter)
return counter
// CounterComponent.jsx Dispatch Example
import React from 'react'
import useDispatch from 'react-redux'
export const CounterComponent = ( value ) =>
// Dispatching an action
const dispatch = useDispatch()
return (
value
)
// CounterComponent.jsx Referencing the store example
import React from 'react'
import useStore from 'react-redux'
export const CounterComponent = ( value ) =>
const store = useStore()
// EXAMPLE ONLY! Do not do this in a real app.
// The component will not automatically update if the store state changes
return store.getState()