React Query + Redux toolkit 封装异步请求

当你需要进行 Redux 和 React Query 的组合时,除了常规的 Redux 方法(例如手动派发 action 和更新 state),还可以使用 createSlice 和 React Query 进行组合,这可以让你更方便地封装异步请求和更容易地更新状态。

使用 createSlice 创建 reducer:

javascript 复制代码
import { createSlice } from '@reduxjs/toolkit';
import { fetchUserInfo, fetchUserList } from './api';
import { useQuery } from 'react-query';

const userSlice = createSlice({
  name: 'users',
  initialState: {
    userInfo: null,
    userList: null,
  },
  reducers: {
    setUserInfo: (state, action) => {
      state.userInfo = action.payload;
    },
    setUserList: (state, action) => {
      state.userList = action.payload;
    },
  },
});

export const { setUserInfo, setUserList } = userSlice.actions;

export const useUserInfoQuery = (userId) => {
  const { data, isLoading, isError } = useQuery(['userInfo', userId], () => fetchUserInfo(userId));

  if (data) {
    dispatch(setUserInfo(data));
  }

  return {
    user: useSelector((state) => state.users.userInfo),
    isLoading,
    isError,
  };
};

export const useUserListQuery = () => {
  const { data, isLoading, isError } = useQuery('userList', fetchUserList);

  if (data) {
    dispatch(setUserList(data));
  }

  return {
    userList: useSelector((state) => state.users.userList),
    isLoading,
    isError,
  };
};

export default userSlice.reducer;

接着,在 store 中注册 userReducer reducer,并添加 React Query Provider,这样可以在整个应用程序中共享 React Query 的 cache,避免重复的请求。

javascript 复制代码
import { configureStore } from '@reduxjs/toolkit';
import { QueryClient, QueryClientProvider } from 'react-query';
import { Provider } from 'react-redux';
import userReducer from './userSlice';

const queryClient = new QueryClient();

const store = configureStore({
  reducer: {
    users: userReducer,
  },
});

ReactDOM.render(
  <Provider store={store}>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </Provider>,
  document.getElementById('root')
);

最后,在组件中使用创建的 useUserInfoQueryuseUserListQuery hooks,展示用户信息和用户列表。

javascript 复制代码
import { useUserInfoQuery, useUserListQuery } from './userSlice';

const UserInfo = ({ userId }) => {
  const { user, isLoading, isError } = useUserInfoQuery(userId);

  if (isLoading) {
    return <div>Loading</div>;
  }

  if (isError) {
    return <div>Error</div>;
  }

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
      <p>{user.phone}</p>
    </div>
  );
};

const UserList = () => {
  const { userList, isLoading, isError } = useUserListQuery();

  if (isLoading) {
    return <div>Loading</div>;
  }

  if (isError) {
    return <div>Error</div>;
  }

  return (
    <div>
      {userList.map(user => (
        <div key={user.id}>
          <h2>{user.name}</h2>
          <p>{user.email}</p>
          <p>{user.phone}</p>
        </div>
      ))}
    </div>
  );
};

通过使用 createSlice 和 React Query 结合的方式,不仅可以更轻松管理 Redux 的异步状态和数据请求,也更方便地管理用户的相关状态信息。

相关推荐
余道各努力,千里自同风16 分钟前
el-input 输入框宽度自适应宽度
javascript·vue.js·elementui
Southern Wind1 小时前
Vue 3 多实例 + 缓存复用:理念及实践
前端·javascript·vue.js·缓存·html
前端鳄鱼崽1 小时前
【react-native-inspector】全网唯一开源 react-native 点击组件跳转到编辑器
前端·react native·react.js
用户98402276679181 小时前
【React.js】渐变环形进度条
前端·react.js·svg
前端拿破轮1 小时前
从0到1搭一个monorepo项目(一)
前端·javascript·git
Mintopia2 小时前
🎨 AIGC 内容过滤技术:当创作的洪流遇上理性的堤坝
前端·javascript·aigc
Shi_haoliu2 小时前
Vue2 + Office Add-in关于用vue项目于加载项控制excel单元格内容(Demo版)
前端·javascript·vue.js·node.js·html·excel·office
aesthetician6 小时前
Node.js v25 重磅发布!革新与飞跃:深入探索 JavaScript 运行时的未来
javascript·node.js·vim
demi_meng10 小时前
reactNative 遇到的问题记录
javascript·react native·react.js
千码君201610 小时前
React Native:从react的解构看编程众多语言中的解构
java·javascript·python·react native·react.js·解包·解构