Estoy tratando de obtener datos de mi backend a mi tienda redux para acceder a ellos en mi componente React funcional. (Usando ganchos en lugar de clases)
Cuando intento obtener los datos en el componente mismo de esta manera:
useEffect(() => { const fetchCategories = async () => { const res = await trees.get('/categories') setCategories(res.data) } fetchCategories() }, [])funciona y tengo acceso a los datos, pero obviamente no está en la tienda redux, solo en el estado de mis componentes. (Tengo mi axios.create en un archivo separado, por lo que puedo buscarlo con tree.get)
Y buscar en mi creador de acciones también funciona, puedo enviar con éxito los datos de las respuestas a mi tienda redux de esta manera:
export const fetchCategories = async () => { const res = await trees.get('/categories') dispatch({ type: FETCH_CATEGORIES, payload: res.data }) }Pero no sé cómo ejecutar correctamente mi creador de acciones para acceder a los datos en la tienda redux desde mi React Component. Probé varias cosas como:
const [categories, setCategories] = useState([{ "value": "loading...", "icon": "music" }]) useEffect(() => { const plsWork = async () => { const res = await fetchCategories() console.log(res) } plsWork() }, [])o useSelector Hook de redux, pero no pude encontrar una manera, eso está funcionando. :(
Usó el gancho useDispach para actualizar los datos de la tienda redux y debe usar el gancho useSelector para obtener los datos de estado que desea.
const categories = useSelector((state) => state.categories)También debe pasar el envío, ya que puede usar useDispatch hook solo en el componente funcional. Así que para esto:
export const fetchCategories = async ()=> (dispatch)=> { const res = await trees.get('/categories') dispatch({ type: FETCH_CATEGORIES, payload: res.data }) }Luego, en el componente donde desea acceder al estado, debe usar useSelector hook
const dispatch=useDispatch(); const categories=useSelector((state)=>state.reducerName.categories); // if you have more than one reducer write here reducername which you have assigned it in the combineReducer or if you are using only single reducer then you can also access it simply by state.categories useEffect(() => { dispatch(fetchCategories()); }, [])