将React.useReducer重构为Redux Toolkit后状态更新触发渲染错误如何解决？

你遇到的报错本质是React渲染流程的强制限制：不允许在一个组件的同步渲染过程中，触发另一个组件的更新。
你之前的实现里Parent组件在渲染同步阶段直接调用doSomethingWithState(state)，如果这个操作触发了Redux状态变更、或者间接触发了Child的更新逻辑，就会触发该报错。你用store.getState()的方案跳过了useSelector的订阅机制，相当于主动断开了状态变化对父组件的渲染触发链路，所以暂时规避了报错，但确实不符合Redux的最佳实践。

方案1：把渲染阶段的状态处理逻辑移到副作用钩子中 #

这是最推荐的修复方式，把需要基于状态执行的操作放到useEffect里，等组件渲染完成后再执行，不会打断正常渲染流程：

import { useEffect } from 'react';
import { useSelector } from 'react-redux';

export const Parent: React.FC<Props> = () => {
  const state = useSelector((state: RootState) => state.slice);

  // 移到useEffect中，渲染完成后再执行
  useEffect(() => {
    doSomethingWithState(state);
  }, [state]);

  return (<div></div>)
}

方案2：给useSelector添加自定义对比函数（仅适用于不需要监听状态变化的场景） #

如果Parent组件只需要获取初始化状态，不需要响应后续的状态变化，可以给useSelector传入第二个对比函数，让它永远不触发重渲染：

import { useSelector } from 'react-redux';

export const Parent: React.FC<Props> = () => {
  // 第二个参数返回true意味着永远认为状态没有变化，不会触发父组件重渲染
  const state = useSelector((state: RootState) => state.slice, () => true);

  doSomethingWithState(state);

  return (<div></div>)
}

方案3：使用useStore钩子获取store实例（RTK官方推荐的替代单例导入的方案） #

如果确实需要在组件内随时获取最新状态、又不想使用全局单例导入，可以用react-redux提供的useStore钩子，它会从上下文里拿到当前应用的store实例，符合Redux的上下文注入规范：

import { useStore } from 'react-redux';
import type { RootState } from './redux/store';

export const Parent: React.FC<Props> = () => {
  const store = useStore<RootState>();
  const state = store.getState().slice;

  doSomethingWithState(state);

  return (<div></div>)
}

注意：这种方式拿到的状态不会自动订阅更新，只有组件自身因为其他原因重渲染时才会拿到最新的状态，如果需要响应状态变化还是要配合useEffect使用。

如果doSomethingWithState本身是纯计算逻辑、不会触发状态更新，建议把它抽到Selector中，既可以利用Redux Toolkit内置的缓存能力，也能减少组件内的冗余逻辑：

// 在slice文件里定义带缓存的selector
import { createSelector } from '@reduxjs/toolkit';

const selectSlice = (state: RootState) => state.slice;
export const selectProcessedSliceData = createSelector(
  selectSlice,
  (slice) => doSomethingWithState(slice)
);

// Parent组件里直接使用
export const Parent: React.FC<Props> = () => {
  const processedData = useSelector(selectProcessedSliceData);
  return (<div>{processedData}</div>)
}

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