React Native中Redux Toolkit长耗时Dispatch阻塞导航问题求助

你的代码卡顿是因为fib函数是同步阻塞式计算，运行在主线程中。点击按钮时，dispatch(getFibResult(100))会先同步执行完整个斐波那契计算，才会执行后续的navigation.navigate，直接卡住了UI线程和导航操作。

把耗时的斐波那契计算从主线程的同步流程中剥离，放到异步任务队列里，让主线程先处理导航，后台再完成计算并更新Redux状态。

具体实现方案 #

1. 将斐波那契计算改为异步执行 #

用Promise+setImmediate（React Native/Web通用）把计算逻辑放到当前事件循环的末尾，不阻塞主线程的同步操作：

// fibCalculations.actions.ts
const fib = (num: number): Promise<number> => {
  return new Promise((resolve) => {
    // 让计算在当前同步代码执行完后再启动
    setImmediate(() => {
      let num1 = 0;
      let num2 = 1;
      let sum;
      for (let i = 0; i < num; i++) {
        sum = num1 + num2;
        num1 = num2;
        num2 = sum;
      }
      resolve(num2);
    });
  });
};

// 改为异步Thunk函数
const getFibResult = (input: number) => async (dispatch: AppDispatch) => {
  const result = await fib(input);
  dispatch({
    type: ActionTypes.UPDATE_RESULT,
    payload: result
  });
};

2. 调整按钮点击逻辑：先导航，再触发计算 #

让导航操作优先执行，不等待计算完成：

// ResultScreen.tsx
const navigateSecondScreen = () => {
  // 先执行导航，立即切换页面
  navigation.navigate("SecondScreen");
  // 后台异步执行斐波那契计算并更新状态
  dispatch(getFibResult(100));
};

进阶：用Redux Toolkit的createAsyncThunk规范异步操作 #

如果想更贴合RTK的最佳实践，可以用官方提供的异步Thunk工具，自动处理pending/fulfilled/rejected状态：

// fibCalculations.slice.ts
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

// 创建异步Thunk
export const getFibResult = createAsyncThunk(
  'fibReducer/getFibResult',
  async (input: number) => {
    return new Promise<number>((resolve) => {
      setImmediate(() => {
        let num1 = 0;
        let num2 = 1;
        let sum;
        for (let i = 0; i < input; i++) {
          sum = num1 + num2;
          num1 = num2;
          num2 = sum;
        }
        resolve(num2);
      });
    });
  }
);

const FibSlice = createSlice({
  name: "FibReducer",
  initialState: { result: 0 }, // 补充初始状态
  reducers: {},
  extraReducers: (builder) => {
    builder
      // 计算完成后更新状态
      .addCase(getFibResult.fulfilled, (state, action) => {
        state.result = action.payload;
      })
      .addDefaultCase(state => state);
  }
});

export default FibSlice.reducer;

此时ResultScreen的点击逻辑和之前一致，直接先导航再dispatch即可。

极端场景优化 #

如果是计算量极大的场景（比如fib(100000)），上述方法仍可能占用主线程，可以考虑用React Native的后台任务库（如react-native-background-task或Expo的TaskManager）把计算放到真正的后台线程中，彻底和主线程解耦。

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