如何使用React Hook调用返回调度函数的操作

Question

我同时使用React class和Hooks。我知道我不应该，但你们知道公司的遗留代码是如何工作的。我们正朝着勾手的方向前进，但这需要时间和精力。我们正在使用redux thunk。在对用户进行分页时，我们有如下操作：

action.js文件：

export const fetchAccounts = (page, countPerPage)=>{
return function (dispatch){
dispatch(fetchAccountsInit());
return axiosInstance.get(`/auth/users/fetch-users/${page}/${countPerPage}`)
.then(res => res.data)
.then(accounts=>{
dispatch(fetchAccountsSuccess(accounts));
return accounts
})
.catch(({response}) => {
dispatch(fetchAccountsFail(response.data.errors));
})

}}

之前的开发人员做了如下操作：正在使用钩子的User.js文件：

const getUserList = () => {    
dispatch(actions.fetchAccounts(page, countPerPage))
.then(res => {  
setUsers(res);
setCountPerPage(10);
setTotalRows(res[0].total_count);
}).catch(err => {
setUsers({});
});
}
useEffect(() => {
getUserList();
}, [page]);

代码正在运行，没有任何问题。但在我看来，这似乎是不对的。我认为代码应该是：

export const fetchAccounts = (page, countPerPage)=>{
return function (dispatch){
dispatch(fetchAccountsInit());
axiosInstance.get(`/auth/users/fetch-users/${page}/${countPerPage}`)
.then(res => res.data)
.then(accounts=>dispatch(fetchAccountsSuccess(accounts)))
.catch(({response}) => {
dispatch(fetchAccountsFail(response.data.errors));
})
}
}

当我调用上面相同的函数const getUserList = () => { ...时我得到错误为TypeError: Cannot read property 'then' of undefined

现在正在工作的User.js文件中没有mapDispatchToProps。它使用的是import {useDispatch} from 'react-redux';和const dispatch = useDispatch();，我想我不明白如果更改操作，这个分页应该如何工作。我正在工作的这个项目中的代码是对的还是有问题？

Answer 1

在更改之前，thunk返回最终数据的承诺-您删除了return，现在它返回undefined。如果你想做一个dispatch(thunk()).then(...)，那个暴徒仍然必须返回一个承诺。