难以实施 redux thunk

Question

这是我第一次使用 redux hooks，我一直收到错误：“错误：操作必须是普通对象。为异步操作使用自定义中间件。”

我添加了中间件 thunk。按照其他人的问题，我不确定我在哪里犯了错误。我正在寻找关于我做错了什么以及我应该阅读什么来解决它的解释。

操作：

export const fetchNewsData = () => {
    return (dispatch) => {
        axios.get('http://localhost:3001/getnews')
            .then(response => {
                console.log(response.data);
                
                const data = response.data;
                dispatch(loadNews(data));
            })
            .catch(error => {
                console.log(error);

                dispatch(errorOnNews(error));
            });
    }
}

export const loadNews = (fetchedData) => {
    return {
        type: LOAD_NEWS,
        payload: fetchedData
    }
}

export const errorOnNews = (errorMessage) => {
    return {
        type: ERROR_ON_NEWS,
        payload: errorMessage
    }
}

减速器：

const initialState = {
    fetched: false,
    data: [],
    input: '',
    filtered: [],
    error: ''
}

const newsReducer = (state = initialState, action) => {
    switch(action.type) {
        case LOAD_NEWS:
            return {
                ...state,
                fetched: true,
                data: action.payload
            }

        case FILTER_NEWS:
            return {
                ...state
            }

        case ERROR_ON_NEWS:
            return {
                ...state,
                error: action.payload
            }
        
        default: return state;
    }
}

商店：

import { createStore, applyMiddleware } from 'redux';
import ReduxThunk from 'redux-thunk';
import rootReducer from './rootReducer';
const store = createStore(rootReducer, applyMiddleware(thunk));

组件：

const fetch = useDispatch(fetchNewsData());

useEffect(() => {
        if(hasFetched){
            // work on true condition
        } else {
            fetch(); // fails on this line.
        }
    }, []);

Answer 1

正在按照教程进行操作并创建了不必要的额外工作。答案是：

剪切：const fetch = useDispatch(fetchNewsData());

更改：fetch(); 到 fetchNewsData();

在这种情况下，我正在调用一个处理函数，该函数将在需要时执行调度。

Answer 2

useDispatch 不是这样工作的，因为它忽略了所有参数，只是 returns 你一个 dispatch 函数。所以你在那里调用了 dispatch()，这实际上等于 dispatch(undefined) - 并且商店不知道该操作是什么。

改为这样做：

const dispatch = useDispatch();

useEffect(() => {
        if(hasFetched){
            // work on true condition
        } else {
            dispatch(fetchNewsData()); // fails on this line.
        }
    }, []);

另外，通常你在这里写的是一种非常过时的 redux 风格，我们真的不建议再在新的应用程序中学习或使用它。您可能一直在遵循过时的教程 - 因为这种风格需要您多次编写必要的代码并且更容易出错。

有关现代 redux 和官方 redux 工具包的最新教程，请参阅 the official redux tutorials

难以实施 redux thunk

Difficulty implementing redux thunk

redux

redux-thunk

react-hooks