using hooks with react redux. Reducer not getting hit. No state - reactjs

Question

I am working on a react application using redux with hooks.
Here is my action creator below
PostAction
***********
import * as types from "./actionTypes";
import axios from 'axios';
const ROOT_URL = 'http://dotsuper.com/api'
export function fetchPosts(){
const request = axios.get(`${ROOT_URL}/post/getposts`)
return {
type: types.GETALL_POSTS,
payload: request
}
}
Here is my reducer below
PostReducer
************
import _ from 'lodash';
import * as types from "../actions/actionTypes";
export default function postReducer(state = [], action) {
switch (action.type) {
case types.GETALL_POSTS:
debugger;
console.log(action.payload.data);
return _.mapKeys(action.payload.data, 'id');
default:
return state;
}
}
Here is what my store configuration looks like
configureStore
***************
import { createStore, applyMiddleware, compose } from "redux";
import rootReducer from "./reducers";
import reduxImmutableStateInvariant from "redux-immutable-state-invariant";
import thunk from 'redux-thunk';
export default function configureStore(initialState) {
const composeEnhancers =
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; //add support for redux dev tools.
return createStore(
rootReducer,
initialState,
composeEnhancers(applyMiddleware(thunk, reduxImmutableStateInvariant()))
);
}
Here is what my component looks like.
My question is when I look at my devtools, the state for posts is
completely empty. When I set a debugger, my PostReducer is not getting hit. I think I am still
missing something. I don't think you can use connect with hooks. What do I need to do below
to have data in my state and be able to hit my post reducer?
PostPage
**************
import React, { useState, useEffect } from "react";
import {fetchPosts} from "../../redux/actions/postActions";
const PostsPage = () => {
const [getPosts, setGetPosts] = useState([]);
async function fecthData(){
const res = fetchPosts()
}
useEffect( () => {
fecthData();
},[]);
return (
<div>
<h2>Posts</h2>
<p>
This page is for all the posts.
</p>
</div>
);
}
export default PostsPage;

Answer 1

You're calling the action generator fetchPosts() inside your component, but you actually never dispatch any change into your state. If you look closely you'll see that you're fetchPosts() returns an object commonly known as actions:
{
type: types.GETALL_POSTS,
payload: request
}
So basically when you call the fetchPosts, you fetch something and you return this object. No touching to the Redux state so far
In the next step you should actually take this object and dispatch it to your store, like this:
const action = await fetchPosts();
dispatch(action);
Which when you use connect with mapDispatchToProps the connect will take care of it for you.
Check here to get a better grasp of the concept.
When using with hooks however, you can import these from react-redux:
useDispatch instead of mapDispatchToProps and,
useSelector instead of mapStateToProps
import {useDispatch, useSelector} from 'react-redux';
import myAction from 'path/to/my/action';
const MyComponent = (props) => {
const myState = useSelector(state => state.myState);
const dispatch = useDispatch();
const handleClick = () => {
dispatch(myAction());
}
return (
...
)
}

Answer 2

Check inside fetchPosts method, axios.get returns promise. you need to make
the method async and handle async data.
You need to dispatch the action in order to bind the action with the redux state.
// PostAction
import * as types from "./actionTypes";
import axios from 'axios';
const ROOT_URL = 'http://dotsuper.com/api'
export function fetchPosts(){
return async (dispatch) => {
const request = await axios.get(`${ROOT_URL}/post/getposts`); // returns promise.
dispatch({
type: types.GETALL_POSTS,
payload: request
});
}
}
// PostPage
import React, { useState, useEffect } from "react";
import {useDispatch} from "react-redux";
import {fetchPosts} from "../../redux/actions/postActions";
const PostsPage = () => {
const [getPosts, setGetPosts] = useState([]);
const dispatch = useDispatch();
useEffect( () => {
dispatch(fetchPosts());
},[]);
return (
<div>
<h2>Posts</h2>
<p>
This page is for all the posts.
</p>
</div>
);
}
export default PostsPage;