时间戳

首页 > 解决方案 > 如何使数据获取与 Redux Toolkit 和 React Hooks 一起工作？

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

问题描述

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

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

它有效。

然后我也尝试在文档中执行以下操作，只是为了获取一些数据并显示在页面上，使用

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"andStore does not have a valid reducer.

如何让它发挥作用？而函数fetchUsers()，它是否属于Users.jsor usersSlice.js，在这个使用 Redux Toolkit 的数据获取机制中还有其他需要改变的地方吗？

标签： reactjsreduxredux-toolkit

解决方案

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

export const { usersLoading, usersReceived } = usersSlice.actions

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

推荐阅读