如何使数据获取与 Redux Toolkit 和 React Hooks 一起工作？答案

【问题标题】：How to make data fetching work together with Redux Toolkit and React Hooks?如何使数据获取与 Redux Toolkit 和 React Hooks 一起工作？
【发布时间】：2021-03-23 11:11:19
【问题描述】：

我正在尝试 Redux Toolkit 文档中的示例：

演示：https://codesandbox.io/s/nice-sound-1ybmf?file=/features/counter/Counter.js

它有效。

然后我尝试做the following also in the docs just to fetch some data and display on the page，使用

const fetchUsers = () => async (dispatch) => {
  dispatch(usersLoading());
  const response = await fetch("https://jsonplaceholder.typicode.com/users");
  const data = await response.json();
  dispatch(usersReceived(data));
};

演示：https://codesandbox.io/s/zen-northcutt-lb4ww?file=/features/users/Users.js

但No reducer provided for key "users" 和Store does not have a valid reducer. 会出错

如何让它发挥作用？还有fetchUsers()这个函数，到底是属于Users.js还是usersSlice.js，在这个使用Redux Toolkit的数据获取机制中还有什么需要改变的吗？

【问题讨论】：

只需使用 react-query，不用费心使用全局客户端状态管理来处理服务器状态。react-query.tanstack.com/overview
@Domino987 react-query 是否像 Redux 一样提供“唯一的数据存储”？但是假设项目需要使用 Redux 或者团队决定使用 React 和 Redux 或 Redux Toolkit？
更好的是，所有内容都在组件之间进行缓存和同步。是的，这就是我现在仔细查看您的代码的原因。

标签： reactjs redux redux-toolkit

【解决方案1】：

您已将用户操作的导出添加到用户切片，但您仍在整体导入 userSlice 减速器以创建您的商店。

export const { usersLoading, usersReceived } = usersSlice.actions

由于您没有导出切片，因此无法访问切片。您需要额外导出带有export default usersSlice.reducer 的切片，以便import usersReducer from "../features/users/usersSlice"; 再次工作

【讨论】：