Redux Toolkit+React：修改Slice触发其他Slice订阅组件重渲染问题

首先明确：这种跨Slice的意外重渲染不是正常行为，问题大概率出在你的reducer实现细节上，和redux-observable中间件无关——你的中间件配置是正确的，不会破坏Redux Toolkit默认的Immer实现。

为什么会出现跨Slice重渲染？ #

Redux的useSelector默认用**严格相等（===）**对比前后返回值，只有当返回值的引用发生变化时，才会触发组件重渲染。如果修改Slice A的属性，订阅Slice B的组件也重渲染了，说明Slice B的对象引用在这次action中被改变了，常见原因有两个：

1. 某Slice的reducer处理无关action时返回了新对象

   • 如果你有手动编写的reducer（不是用createSlice生成的），并且在default case中返回了{...state}而不是原state，那么每次任何action被dispatch时，这个Slice都会生成新的对象引用，导致订阅它的组件强制重渲染。
   • 而createSlice生成的reducer会自动处理default case，直接返回原state，不会创建新对象，所以你提供的UI Slice代码这部分是没问题的。

2. 错误地修改了整个Root State

   • 如果某个reducer没有遵循不可变更新规则，直接修改了Root State而非对应的子Slice，会导致所有Slice的引用都发生变化。但从你的代码来看，你用了createSlice和Immer的写法，这部分操作是合规的。

关于redux-observable的配置说明 #

你添加中间件的方式完全正确：

const store = configureStore({
  reducer: reducers,
  middleware: getDefaultMiddleware => getDefaultMiddleware().prepend( epicMiddleware )
})

getDefaultMiddleware()会保留Redux Toolkit默认的所有中间件（包括Immer支持、序列化检查等），prepend只是把epic中间件放到队列最前面，不会移除或破坏Immer的功能，所以中间件不是问题根源。

具体解决方案 #

1. 检查所有Slice的reducer实现

   • 确保所有Slice都通过createSlice生成，避免手动编写reducer时的低级错误。
   • 如果必须手动编写reducer，一定要保证default case直接返回原state：

     function manualReducer(state = initialState, action) {
       switch(action.type) {
         case 'SOME_ACTION':
           return {...state, updatedProp: action.payload};
         // 正确的default处理：返回原state，不创建新对象
         default:
           return state;
       }
     }
     

2. 优化useSelector的选择逻辑

   • 如果你不需要整个Slice对象，可以让selector直接返回需要的单个属性，进一步减少重渲染触发概率：

     // 之前：返回整个slice对象
     const slice1 = useSelector(({ slice1 }: RootState) => slice1);
     // 优化：只返回需要的属性
     const showQrCode = useSelector(({ uistate }: RootState) => uistate.showQrCode);
     

   • 如果你确实需要整个Slice对象，可以使用shallowEqual进行浅比较（不过只要Slice引用不变，这一步不是必须的）：

     import { shallowEqual, useSelector } from 'react-redux';
     
     const slice1 = useSelector(({ slice1 }: RootState) => slice1, shallowEqual);
     

3. 添加日志验证引用变化

   • 在订阅Slice的组件中添加日志，确认Slice的引用是否真的发生了变化，帮助定位问题：

     const slice1 = useSelector(({ slice1 }: RootState) => slice1);
     useEffect(() => {
       console.log('slice1引用发生变化:', slice1);
     }, [slice1]);
     

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