useEffect dispatch问题（可能需要添加中间件）答案

【问题标题】：useEffect dispatch problem (you may need to add middleware)useEffect dispatch问题（可能需要添加中间件）
【发布时间】：2021-09-13 12:15:16
【问题描述】：

API

import axios from "axios"

const url = "http://localhost:5000/posts"

export const fetchPosts = () => async () => await axios.get(url)

export const createPost = async (post) => await axios.post(url, post)

动作

export const fetchPosts = async (dispatch) => {
    try {
        const {data} = await api.fetchPosts()
        dispatch({
            type: types.FETCH_POSTS,
            payload: data
        })
    } catch (err) {
        console.error(err)
    }
}

商店

import { createStore, applyMiddleware } from 'redux'
import rootReducer from './index'
import thunk from 'redux-thunk'

export default function configureStore() {
    return createStore(rootReducer, applyMiddleware(thunk))
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Provider } from 'react-redux'
import configureStore from './Redux/store/configureStore'

const store = configureStore();

ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));

我想通过 axios 向我的帖子发出 get 请求。 post请求没有问题，但我无法获得。

useEffect(() => {
    dispatch(fetchPosts())
  }, [dispatch])

当我使用这个方法时，它会抛出这个错误：

错误：动作必须是普通对象。相反，实际的类型是：'Promise'。您可能需要将中间件添加到您的商店设置中以处理调度其他值，例如“redux-thunk”来处理调度函数。

没有任何语法或导入/导出错误。

为什么即使我插入了 redux thunk 来存储它也会抛出这个中间件错误？

【问题讨论】：

标签： reactjs redux redux-thunk

【解决方案1】：

你需要更新fetchPosts返回一个函数

export const fetchPosts = () => async (dispatch) => {
    try {
        const {data} = await api.fetchPosts()
        dispatch({
            type: types.FETCH_POSTS,
            payload: data
        })
    } catch (err) {
        console.error(err)
    }
}

【讨论】：

【解决方案2】：

export const fetchPosts = () => async () => await axios.get(url)

上面的函数返回一个承诺

试试

export const fetchPosts = async () => { 
   let res = await axios.get(url) 
   return res;
}

【讨论】：

您是否更改了 fetchPost 以使其不返回回调但返回结果？（如我给出的示例）

【解决方案3】：

您的操作有一点问题。 Action creators 是返回操作的函数。你想从你的动作创建者那里返回一个动作（在本例中是一个函数）。

所以你的行动应该是：

export const fetchPosts = () => async (dispatch) => {
// Added this part        ^^^^^^ 
    try {
        const {data} = await api.fetchPosts()
        dispatch({
            type: types.FETCH_POSTS,
            payload: data
        })
    } catch (err) {
        console.error(err)
    }
}

或者，您可以对代码进行以下更改：

useEffect(() => {
    dispatch(fetchPosts)
    // Removed the () ^
  }, [dispatch])

【讨论】：