如何在单个组件中调用Redux Store变更及处理路由切换时的Store更新？

嘿，这个问题在React Router结合Redux开发时太常见了，组件复用带来的生命周期钩子触发时机问题确实容易踩坑，我给你整理几个实用的解决方案：

1. 类组件：用componentDidUpdate监听路由参数变化 #

因为React Router会复用匹配相同组件的路由页面，所以componentDidMount只会在组件首次挂载时执行一次。这时候你可以利用componentDidUpdate钩子，对比前后路由参数的变化，当参数不同时更新Store：

class Category extends React.Component {
  componentDidMount() {
    // 首次挂载时初始化Store
    this.props.fetchCategoryContent(this.props.match.params.categoryId);
  }

  componentDidUpdate(prevProps) {
    // 对比当前与之前的分类参数，只有变化时才更新Store
    if (this.props.match.params.categoryId !== prevProps.match.params.categoryId) {
      this.props.fetchCategoryContent(this.props.match.params.categoryId);
    }
  }

  render() {
    // ...你的渲染逻辑
  }
}

// 别忘了用connect连接Redux，注入fetchCategoryContent action
export default connect(null, { fetchCategoryContent })(Category);

2. 函数组件：用useParams + useEffect监听参数变化 #

如果你的组件是函数式写法，React Router提供的useParams钩子可以轻松获取路由参数，再配合React的useEffect监听参数变化，就能实现Store的更新：

import { useParams } from 'react-router-dom';
import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { fetchCategoryContent } from '../actions/categoryActions';

const Category = () => {
  const { categoryId } = useParams();
  const dispatch = useDispatch();

  // 当categoryId变化时，自动触发Store更新
  useEffect(() => {
    dispatch(fetchCategoryContent(categoryId));
  }, [categoryId, dispatch]); // 依赖项数组确保只有参数变化时执行

  // ...你的渲染逻辑
};

export default Category;

3. 确保组件能拿到路由Props：用withRouter高阶组件 #

如果你的类组件没有直接接收到match等路由Props（比如没有直接作为路由组件配置），可以用withRouter高阶组件包裹组件，注入路由相关的Props，这样就能在componentDidUpdate中监听参数变化了：

import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { fetchCategoryContent } from '../actions/categoryActions';

class Category extends React.Component {
  // ...componentDidMount和componentDidUpdate逻辑
}

// 先包裹withRouter，再连接Redux
export default withRouter(connect(null, { fetchCategoryContent })(Category));

为什么不能在render里更新Store？ #

你说得对，绝对不能在render函数里调用更新Store的逻辑。因为render是纯计算过程，Store更新会触发组件重新render，这样会形成无限循环，导致应用卡死，所以一定要避免这种写法。

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