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

Question

所以我一直在练习我的一个项目，我在名为 Sheet 的 React 组件中有一个 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")
    }  
}

我正在尝试实施而不是旧的，这个没有 work/trigger:

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。 第一个触发并获取结果数组，但是当我注释掉它并将第二个放在同一个地方时 - 它甚至没有触发（无法调试）。

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

P.S 设置来自 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;

请注意，im testing/having 在 Sheet 组件和 useEffect 中都起作用，以简化测试。出于同样的原因，日期也被硬编码在第二个中。

Answer 1

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

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

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

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

Redux/Thunk - async fetch function issues

asynchronous

reactjs

redux

redux-thunk