'Try to connect Action with Reducer but get Error: Uncaught (in promise) TypeError: dispatch is not a function
Friends, I have a problem with the connection between Action and Reducer when trying to send data that come back from the API I get dispatch, not a function and when trying to console.log(action.type) I get @@redux/INITw.y.u.w.s.a are any help, and thanks very much
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)
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
