React-Redux跳转组件时如何过滤并更新全局状态

你的核心问题是：表单提交后直接用axios请求数据，但没有通过Redux的action更新全局状态，导致跳转后组件读取的还是Redux初始状态。下面是具体的修正方案和优化实现：

1. 改造Redux支持带参数的请求 #

首先修改你的Redux逻辑，让fetchProducts动作能接收过滤参数，从而请求接口时带上条件并更新全局状态：

修改动作创建器 productActions.js #

import { fetchProductsStart, fetchProductsSuccess, fetchProductsFailure } from '../slices/productsSlice';
import { baseUrl } from '../../shared/baseUrl';

// 新增参数filters，默认空对象
export const fetchProducts = (filters = {}) => async dispatch => {
  try {
    dispatch(fetchProductsStart());
    // 用URLSearchParams自动拼接查询参数
    const params = new URLSearchParams(filters);
    const response = await fetch(`${baseUrl}products?${params}`);
    const data = await response.json();
    dispatch(fetchProductsSuccess(data));
  } catch (error) {
    dispatch(fetchProductsFailure(error));
  }
};

切片处理器 productsSlice.js 无需修改 #

现有逻辑已经能正确处理fetchProductsSuccess的payload更新状态，保持原样即可。

2. 修正表单提交逻辑（函数组件版） #

去掉组件内直接调用axios的代码，改为通过useDispatch触发Redux动作，更新状态后再跳转：

import { useDispatch } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { fetchProducts } from './path/to/productActions';

// 函数组件内部
const dispatch = useDispatch();
const navigate = useNavigate();

const handleSubmit = (event) => {
  event.preventDefault();
  const tipo = state.tipo;
  const marca = toTitleCase(state.marca);
  const linea = state.linea;
  
  // 构建过滤参数对象
  const filters = { tipo, marca, linea };
  
  // 触发Redux动作更新全局状态
  dispatch(fetchProducts(filters))
    .then(() => {
      // 跳转时把参数拼接为URL查询参数（避免刷新丢失状态）
      navigate(`/store?${new URLSearchParams(filters)}`);
    })
    .catch(error => console.log(error));
};

3. 目标组件（Store组件）读取Redux状态 #

在跳转后的组件中，用useSelector读取Redux中已更新的产品数据：

import { useSelector } from 'react-redux';
import { useLocation, useEffect } from 'react-router-dom';
import { fetchProducts } from './path/to/productActions';
import { useDispatch } from 'react-redux';

const StoreComponent = () => {
  const dispatch = useDispatch();
  const location = useLocation();
  // 从Redux获取全局状态
  const { products, loading, error } = useSelector(state => state.products);

  // 优化：直接访问带参数的/store路径时，自动触发请求
  useEffect(() => {
    const filters = Object.fromEntries(new URLSearchParams(location.search));
    dispatch(fetchProducts(filters));
  }, [location.search, dispatch]);

  // 加载/错误状态处理
  if (loading) return <div>加载中...</div>;
  if (error) return <div>加载失败：{error.message}</div>;

  // 渲染过滤后的产品列表
  return (
    <div className="product-list">
      {products.map(product => (
        <div key={product.id} className="product-item">
          {/* 产品内容渲染 */}
        </div>
      ))}
    </div>
  );
};

export default StoreComponent;

更好的实现思路 #

1. 统一数据源：所有数据请求都通过Redux动作处理，组件只负责触发动作和读取状态，避免组件内零散的axios调用。
2. 路由参数传递条件：用URL查询参数携带过滤条件，而非路由state（路由state刷新页面后会丢失），保证页面刷新后仍能恢复过滤状态。
3. 目标组件自动触发请求：目标组件根据路由参数主动触发数据请求，无需依赖前序组件的状态传递，提升页面独立性。

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