Hey pals, I'm facing an issue with the connection between Action and Reducer while attempting to send data fetched from the API. I keep getting a dispatch, not a function error and when I try to console.log(action.type), I see @@redux/INITw.y.u.w.s.a. Any help would be greatly appreciated. Thanks a ton!
Store
import { createStore, applyMiddleware , compose } from 'redux'
import reduxThunk from 'redux-thunk';
import combineReducers from './Reducers/index';
const enhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
let store = createStore(combineReducers,enhancer(applyMiddleware(reduxThunk)))
export default store;
Action
import { READ_USER_DATA } from './../Types';
export const fetchUser = () => {
return (dispatch) => {
fetch(`https://jsonplaceholder.typicode.com/users`).then(response => response.json()).then(data => {
dispatch({
type: READ_USER_DATA,
data: data
})
})
}
}
Reducer
import { READ_USER_DATA } from './../Types';
const userReducer = (state = {}, action) => {
switch (action.type) {
case READ_USER_DATA:
return { ...state,userInfo: action.data }
default:
return state;
}
}
export default userReducer;
combine Reducers
import { combineReducers } from "redux";
import userReducer from './UserReducer';
export default combineReducers({
user: userReducer,
})
connect - Code in component-
export default connect((state) => {
console.log(state)
return {
userInfo: state.user.userInfo
}
},{ fetchUser })(Home)