Redux/Thunk - 异步获取功能问题

Question

所以我一直在练习我的一个项目，我在名为 Sheet 的反应组件中有一个 async getItems 函数。它工作得很好，因为我在控制台中记录了结果。但是，当我尝试应用 redux/thunk 方式从同一个 API 获取项目时，我的新函数甚至不会触发。尝试了 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 })
}

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

谁能告诉我这段代码我做错了什么？

附在 index.js 中的设置

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

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

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

Reducer.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())