Redux/Thunk - 异步获取 function 问题

Question

所以我一直在练习我的一个项目，我在名为Sheet的反应组件中有一个async getItems function 。 它工作得很好，因为我在控制台中记录了结果。 但是，当我尝试应用 redux/thunk 方式从同一个 API 获取项目时，我的新 function 甚至不会触发。 尝试了 console.logging 它的第一行，没有任何反应。 这是他们的样子。

简单而有效的一个：

const getItems = async (date) =>{
    let request = {}
    try {
        let response = await fetch(`${apiURL}/${date}`, request);
        let data = await response.json();
        console.log(data);
        setItems(data);

    } catch (error){
        console.log("Error fetching data")
    }  
}

我试图实现而不是旧的那个，这个不起作用/触发：

const fetchItems = () => async dispatch =>{
    console.log("Entered fetch items func");
    let request = {};
    let response = await timesheetApi.get(`/17-3-2021`);
    // TRIED USING FETCH INSTEAD AS WELL, NO RESULT AS WELL:
    // let response = await fetch(`http://localhost:44377/${date}`, request);
    // let data = await response.json();
    console.log(response); 
    dispatch({ type: 'FETCH_ITEMS', payload: response })
}

第一个和不工作的我都试图在Sheet组件的useEffect中调用。 第一个触发并获取结果数组，但是当我将其注释掉并将第二个放在同一个位置时 - 它甚至不会触发（无法调试）。

有人可以告诉我这段代码我做错了什么吗？

来自 index.js 的 PS 设置

import thunk from 'redux-thunk'
const store = createStore(reducer, applyMiddleware(thunk));

api 文件夹 > timesheetApi.js 中的 Axios 设置（但我也尝试使用 fetch，结果相同（无）”

import axios from 'axios';
export default axios.create({
    baseURL: 'http://localhost:44377',
});

减速器.js

function reducer (state = initialStore, action)  {

    switch (action.type) {

        case actionTypes.TRIGGER_MODAL:
                console.log("Triggered loading");
                return { ...state, showModal: !state.showModal }

        case actionTypes.FETCH_ITEMS:
            console.log("Reducer - FETCH_ITEMS case");
            return state;

请注意，我在Sheet组件和useEffect中测试/具有这两个功能以简化测试。 出于同样的原因，日期也被硬编码在第二个中。

Answer 1

您将fetchItems定义为 thunk 动作创建者，但在您的useEffect中，您只是调用它而不实际调度它。

这类似于定义一个动作，但从不将其发送到 redux。

在你的useEffect中，你必须dispatch(fetchItems())