React Native中Redux状态更新阻塞导航的优化方案咨询

针对你遇到的Redux状态更新阻塞导航的问题，以下是几个实用的优化方案：

1. 先导航再异步更新Redux状态 #

点击列表项时优先执行导航操作，再异步完成Redux状态更新，避免同步状态更新阻塞导航流程。第二页可通过加载状态过渡，等Redux数据就绪后再渲染内容：

// 列表页点击事件处理
const handleItemClick = (item) => {
  // 先执行导航，不等待Redux更新
  navigation.navigate('DetailScreen');
  // 异步触发Redux状态更新
  dispatch(setCurrentCommunityAsync(item.id));
};

// Redux异步Action（基于redux-thunk）
export const setCurrentCommunityAsync = (id) => async (dispatch, getState) => {
  const { communities } = getState().yourSlice;
  const targetItem = communities.find(item => item.id === id);
  dispatch(setCurrentCommunity(targetItem));
};

2. 用记忆化Selector优化数据查询 #

使用reselect创建记忆化Selector，避免selectById每次重复遍历数据集，减少不必要的计算开销：

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

// 基础Selector
const selectCommunities = state => state.yourSlice.communities;
const selectCurrentId = state => state.yourSlice.currentId;

// 记忆化Selector：仅当communities或currentId变化时重新计算
export const getCurrentCommunity = createSelector(
  [selectCommunities, selectCurrentId],
  (communities, currentId) => communities.find(item => item.id === currentId)
);

3. 简化Reducer中的状态更新逻辑 #

不在Reducer中执行selectById这类查询操作，提前在点击事件中获取目标数据项，直接传递给Reducer做赋值操作，减少Reducer的同步计算时间：

// 列表页点击事件：直接获取当前点击的item，传给Redux
const handleItemClick = (item) => {
  dispatch(setCurrentCommunity(item));
  navigation.navigate('DetailScreen');
};

// Reducer中仅做简单赋值
const yourSlice = createSlice({
  name: 'yourSlice',
  initialState: { current: null },
  reducers: {
    setCurrentCommunity: (state, action) => {
      state.current = action.payload; // 无复杂计算，直接赋值
    }
  }
});

4. 避免不必要的组件重渲染 #

优化useSelector的使用方式，配合shallowEqual减少不必要的组件重渲染，避免Redux状态更新时触发大量组件重渲染阻塞主线程：

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

// 仅当currentCommunity的浅层次属性变化时才重新渲染组件
const currentCommunity = useSelector(getCurrentCommunity, shallowEqual);

同时，用React.memo包裹列表项组件和其他非必要重渲染的组件，进一步减少重渲染次数。

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