Try to connect Action with Reducer but get Error: Uncaught (in promise) TypeError: dispatch is not a function

Question

朋友们，当我尝试发送从 API 返回的数据时，Action 和 Reducer 之间的连接出现问题，我收到 调度，不是函数，当尝试console.log(action.type)时，我得到@@redux/INITw.y.u.w.s.a有任何帮助，非常感谢

店铺

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;

动作

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
            })
        })
    }
}

减速机

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;

合并减速器

import { combineReducers } from "redux";
import userReducer from './UserReducer';

export default combineReducers({
    user: userReducer,
})

connect - 组件中的代码-

export default connect((state) => {
    console.log(state)
    return {
        userInfo: state.user.userInfo
    }
},{ fetchUser })(Home)

Answer 1

I am using the useEffect useEffect(() => ( fetchUser() ), [])

首先，您必须在 useEffect 中使用 {}，而不是 ()。此外，在使用遗留 connect 函数时，您需要直接调用 props.fetchUser，而不是直接调用 fetchUser。您通常不应在功能组件中使用连接，它是一种遗留 api 以支持遗留 class 组件。

所以它看起来像

useEffect(() => { props.fetchUser() }, [])

不过应该是

const userInfo = useSelector(state => state.user.userInfo)
const dispatch = useDispatch()
useEffect(() => { dispatch(fetchUser()) }, [])

根本不使用 connect。

Try to connect Action with Reducer but get Error: Uncaught (in promise) TypeError: dispatch is not a function

Try to connect Action with Reducer but get Error: Uncaught (in promise) TypeError: dispatch is not a function

reactjs

redux

redux-thunk

react-redux