redux-requests 使用教程

redux-requests 使用教程

redux-requestsDeclarative AJAX requests and automatic network state management for single-page applications项目地址:https://gitcode.com/gh_mirrors/re/redux-requests

1、项目介绍

redux-requests 是一个用于管理单页应用程序中 AJAX 请求和网络状态的声明式库。它通过自动化的数据更新和规范化，简化了前端开发中对网络请求的管理。redux-requests 可以与 redux 和 react 无缝集成，提供了丰富的功能，如请求中断、批量请求、请求键管理、请求动作响应、请求重置、拦截器、本地更新、乐观更新、缓存和自动规范化等。

2、项目快速启动

安装

首先，你需要安装 redux-requests 及其依赖：

npm install @redux-requests/core @redux-requests/fetch

配置 Redux Store

在你的 Redux store 配置中，集成 redux-requests：

import { createStore, applyMiddleware } from 'redux';
import { handleRequests } from '@redux-requests/core';
import { createDriver } from '@redux-requests/fetch';

const { requestsReducer, requestsMiddleware } = handleRequests({
  driver: createDriver(fetch),
});

const store = createStore(
  combineReducers({
    requests: requestsReducer,
  }),
  applyMiddleware(requestsMiddleware)
);

发起请求

在你的组件中，使用 redux-requests 发起请求：

import { useDispatch } from 'react-redux';
import { useQuery } from '@redux-requests/react';

const fetchPosts = () => ({
  type: 'FETCH_POSTS',
  request: {
    url: '/api/posts',
    method: 'GET',
  },
});

const PostsList = () => {
  const dispatch = useDispatch();
  const { data, loading, error } = useQuery({ type: 'FETCH_POSTS' });

  useEffect(() => {
    dispatch(fetchPosts());
  }, [dispatch]);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error!</div>;

  return (
    <ul>
      {data.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
};

3、应用案例和最佳实践

应用案例

假设你正在开发一个博客应用，需要从服务器获取文章列表并在前端展示。使用 redux-requests，你可以轻松管理这些请求的状态，并在请求成功或失败时更新 UI。

最佳实践

1. 请求键管理：使用请求键来区分不同的请求，避免请求之间的冲突。
2. 请求中断：在组件卸载时自动中断未完成的请求，避免内存泄漏。
3. 乐观更新：在用户提交表单时，先更新 UI，再发送请求，提升用户体验。

4、典型生态项目

redux-smart-actions

redux-smart-actions 是一个与 redux-requests 配合使用的库，用于创建带有最小样板代码的 Redux 动作和 thunks。它可以帮助你更快地创建请求动作，减少冗余代码。

normy

normy 是一个用于为任何数据获取库添加自动规范化功能的库。如果你主要关心数据规范化功能，可以考虑使用 normy 来增强你的数据管理能力。

---

通过以上步骤，你可以快速上手 redux-requests，并利用其强大的功能来管理你的 AJAX 请求和网络状态。

redux-requestsDeclarative AJAX requests and automatic network state management for single-page applications项目地址:https://gitcode.com/gh_mirrors/re/redux-requests