难以实现redux thunk

Question

这是我第一次使用redux钩子，我一直收到错误："错误：操作必须是纯对象。使用自定义中间件执行异步操作">

我添加了中间件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

useDispatch不能像这样工作，因为它忽略了所有参数，只返回一个dispatch函数。所以你在那里调用了dispatch()，它基本上等于dispatch(undefined)，而商店不知道该如何处理这个操作。

改为：

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

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

有关带有官方redux工具包的现代redux的最新教程，请参阅官方redux教程

Answer 2

正在遵循教程并创建不必要的附加工作。答案是：

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

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

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