React Native中Redux Toolkit的createAsyncThunk内dispatch导致重复渲染

• 所有基于Redux Toolkit的应用均存在该问题：在createAsyncThunk内部调用dispatch触发action时，组件会出现两次渲染
• 此前使用原生Redux时无此问题，切换到Redux Toolkit后出现
• 无论是否集成redux-persist，重复渲染行为都会发生

相关依赖版本 #

"@react-native-async-storage/async-storage": "^1.19.3",
"@react-navigation/bottom-tabs": "^6.5.9",
"@react-navigation/native": "^6.1.8",
"@react-navigation/native-stack": "^6.9.14",
"@reduxjs/toolkit": "^1.9.7",
"axios": "^1.5.1",
"lodash": "^4.17.21",
"react": "18.2.0",
"react-native": "0.72.5",
"react-native-gesture-handler": "^2.13.1",
"react-native-indicators": "^0.17.0",
"react-native-reanimated": "^3.5.4",
"react-native-safe-area-context": "^4.7.2",
"react-native-screens": "^3.25.0",
"react-native-svg": "^13.14.0",
"react-redux": "^8.1.3",
"redux-persist": "^6.0.0"

原因与解决方法 #

问题根源在于Redux Toolkit的createAsyncThunk内部机制：当你在thunk里手动dispatch其他action时，会触发两次状态更新——一次是手动dispatch的action触发的更新，另一次是createAsyncThunk自动生成的pending/fulfilled/rejected状态更新，这两次状态变更都会引发组件渲染。

可行的解决方式：

1. 优先避免在createAsyncThunk内部手动dispatch action，改用createSlice的extraReducers统一处理thunk的状态变更逻辑，把需要更新的状态逻辑都放在这里
2. 如果必须在thunk内部dispatch多个action，可以使用Redux Toolkit提供的batch API包裹dispatch调用，合并状态更新以减少渲染次数：

import { batch } from '@reduxjs/toolkit';

const myThunk = createAsyncThunk('myThunk', async (_, { dispatch }) => {
  batch(() => {
    dispatch(action1());
    dispatch(action2());
  });
  // 后续异步逻辑处理
});

3. 检查应用是否开启了React 18的严格模式（StrictMode），严格模式下会强制组件渲染两次以检测副作用，这也可能是重复渲染的原因之一

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