React Saga中基于请求体参数实现分页数据过滤的问题求助

核心思路 #

通过组件触发Action时携带对应页面的过滤条件，Saga监听Action后提取参数，再将参数放入POST请求体发送给后端，实现不同页面的精准数据筛选。

具体实现步骤 #

1. 定义带参数的Action #

修改Action创建函数，让它能接收过滤条件作为参数：

// actions/productActions.js
export const FETCH_PRODUCTS_REQUEST = 'FETCH_PRODUCTS_REQUEST';
export const FETCH_PRODUCTS_SUCCESS = 'FETCH_PRODUCTS_SUCCESS';
export const FETCH_PRODUCTS_FAILURE = 'FETCH_PRODUCTS_FAILURE';

export const fetchProductsRequest = (filters) => ({
  type: FETCH_PRODUCTS_REQUEST,
  payload: filters // 携带当前页面的过滤条件
});

2. 在Saga中接收并使用参数 #

修改Saga逻辑，从Action的payload中取出过滤条件，放入POST请求的body里：

// sagas/productSaga.js
import { call, put, takeLatest } from 'redux-saga/effects';
import { FETCH_PRODUCTS_REQUEST, fetchProductsSuccess, fetchProductsFailure } from '../actions/productActions';
import axios from 'axios';

function* fetchProductsSaga(action) {
  try {
    // 从Action中获取当前页面的过滤条件
    const filters = action.payload;
    // 发送POST请求，将过滤条件放入请求体
    const response = yield call(axios.post, '/api/products', filters);
    yield put(fetchProductsSuccess(response.data));
  } catch (error) {
    yield put(fetchProductsFailure(error.message));
  }
}

export function* watchFetchProducts() {
  yield takeLatest(FETCH_PRODUCTS_REQUEST, fetchProductsSaga);
}

3. 页面组件中触发Action时传递对应条件 #

在三个产品页面组件里，分别定义各自的过滤条件，在组件挂载（或需要刷新数据时）触发Action并传入：

页面1：新品页面

// components/NewProductsPage.js
import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchProductsRequest } from '../actions/productActions';

const NewProductsPage = () => {
  const dispatch = useDispatch();
  const products = useSelector(state => state.products.items);
  const loading = useSelector(state => state.products.loading);

  useEffect(() => {
    // 传递新品对应的过滤条件
    dispatch(fetchProductsRequest({ status: 'new' }));
  }, [dispatch]);

  // 渲染产品列表逻辑...
};

export default NewProductsPage;

页面2：热销页面

// components/HotProductsPage.js
import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchProductsRequest } from '../actions/productActions';

const HotProductsPage = () => {
  const dispatch = useDispatch();

  useEffect(() => {
    // 传递热销对应的过滤条件
    dispatch(fetchProductsRequest({ sales_volume: { $gt: 1000 } }));
  }, [dispatch]);

  // 渲染产品列表逻辑...
};

export default HotProductsPage;

页面3：折扣页面

// components/DiscountProductsPage.js
import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchProductsRequest } from '../actions/productActions';

const DiscountProductsPage = () => {
  const dispatch = useDispatch();

  useEffect(() => {
    // 传递折扣对应的过滤条件
    dispatch(fetchProductsRequest({ discount: { $gt: 0.2 } }));
  }, [dispatch]);

  // 渲染产品列表逻辑...
};

export default DiscountProductsPage;

4. 后端接收请求体的过滤条件 #

确保后端接口能正确解析POST请求体中的过滤参数（以Express为例）：

// backend/routes/products.js
const express = require('express');
const router = express.Router();
const Product = require('../models/Product');

router.post('/', async (req, res) => {
  try {
    const filters = req.body;
    const products = await Product.find(filters); // 根据过滤条件查询数据库
    res.json(products);
  } catch (error) {
    res.status(500).json({ message: error.message });
  }
});

module.exports = router;

关键注意点 #

• 确保Action的payload结构和后端期望的过滤条件结构一致，避免解析错误
• 如果需要动态调整过滤条件（比如用户在页面上额外筛选），可以在组件中维护state，更新时重新dispatch带新参数的Action
• 使用takeLatest可以避免重复请求，若需要允许多个请求并行，可改用takeEvery

内容的提问来源于stack exchange，提问作者Serija Nada