React Native Redux useSelector组件不更新：状态变更未同步问题排查

问题现象 #

在基于Expo的React Native项目中，LibraryScreen组件内的handleUpdateRecentResource函数无法读取Redux中recentResources的最新状态：首次点击按钮能正常更新状态与数据库，但后续点击时，函数内读取的recentResources始终是初始渲染时的旧值；而RecentResources组件使用完全相同的逻辑却能正常获取最新状态。

核心原因：闭包陷阱 #

LibraryScreen中的handleUpdateRecentResource函数在组件初始渲染时创建，通过闭包捕获了当时的recentResources值。当Redux状态更新后，LibraryScreen会重新渲染并生成新的函数实例，但传递给Books组件的函数并未同步更新（或Books组件未及时感知到props变化），导致每次点击调用的都是旧的函数，始终读取初始状态的recentResources。

而RecentResources组件的handleUpdateRecentResource是内部定义的，每当recentResources变化时，组件会重新渲染，函数也会重新创建，自然能捕获到最新的状态值。

解决方案 #

方案1：用useCallback包裹函数，确保依赖更新时函数重新生成 #

修改LibraryScreen中的函数定义，通过useCallback绑定依赖项，确保recentResources或user更新时，函数能重新生成并传递给Books组件：

import { useCallback } from 'react';

const LibraryScreen = () => {
  // ... 其他原有代码

  const handleUpdateRecentResource = useCallback(async (sku, cover_uri, title) => {
    console.log("Recent Resources", recentResources);

    // 原有逻辑保持不变
    const existingRecentResource = recentResources.find((recentResource) => {
      return recentResource.sku === sku;
    });

    if (existingRecentResource) {
      await updateRecentResourceApi(
        existingRecentResource.id,
        existingRecentResource.title
      ).then((res) => {
        dispatch(updateSelectedRecentResource(res));
      });
    } else {
      if (recentResources.length >= 10) {
        await deleteRecentBookApi(
          recentResources[recentResources.length - 1].id
        );
        await createRecentResourcesApi({
          sku: sku,
          title: title,
          cover_uri: cover_uri,
          userId: user.userId,
        }).then((res) => {
          // dispatch(deleteAndCreateSelectedRecentResource(res));
        });
      } else {
        await createRecentResourcesApi({
          sku: sku,
          title: title,
          cover_uri: cover_uri,
          userId: user.userId,
        }).then((res) => {
          dispatch(addNewSelectedRecentResource(res));
        });
      }
    }
  }, [recentResources, user, dispatch]); // 添加所有依赖项

  // ... 其他原有代码
};

方案2：将异步逻辑移到Redux Thunk（推荐） #

把状态判断与异步请求逻辑封装到Redux Thunk中，直接在Thunk内获取最新的Redux状态，彻底避开闭包问题：

// 在booksSlice文件中创建Thunk
import { createAsyncThunk } from '@reduxjs/toolkit';

export const updateRecentResource = createAsyncThunk(
  'books/updateRecentResource',
  async ({ sku, cover_uri, title, userId }, { getState, dispatch }) => {
    // 直接获取最新的Redux状态
    const { books } = getState();
    const recentResources = books.recentResources;

    const existingRecentResource = recentResources.find(r => r.sku === sku);

    if (existingRecentResource) {
      const res = await updateRecentResourceApi(existingRecentResource.id, existingRecentResource.title);
      dispatch(updateSelectedRecentResource(res));
    } else {
      if (recentResources.length >= 10) {
        await deleteRecentBookApi(recentResources[recentResources.length - 1].id);
        const res = await createRecentResourcesApi({ sku, title, cover_uri, userId });
        // dispatch(deleteAndCreateSelectedRecentResource(res));
      } else {
        const res = await createRecentResourcesApi({ sku, title, cover_uri, userId });
        dispatch(addNewSelectedRecentResource(res));
      }
    }
  }
);

之后在组件中直接dispatch这个Thunk即可，无需传递复杂函数：

// LibraryScreen中简化函数
const handleUpdateRecentResource = (sku, cover_uri, title) => {
  dispatch(updateRecentResource({ sku, cover_uri, title, userId: user.userId }));
};

方案3：将逻辑移到Books组件内部 #

把handleUpdateRecentResource的逻辑直接放到Books组件内，让组件自己订阅recentResources状态，状态更新时组件会重新渲染，函数自然能获取最新值：

// Books组件内部定义函数
const Books = () => {
  // ... 其他原有代码
  const { recentResources } = useSelector(state => state.books);
  const dispatch = useDispatch();
  const { user } = useSelector(state => state.user);

  const handleUpdateRecentResource = async (sku, cover_uri, title) => {
    // 原有逻辑保持不变
    console.log("Recent Resources", recentResources);
    const existingRecentResource = recentResources.find(r => r.sku === sku);
    // ... 后续异步请求与dispatch逻辑
  };

  // ... 原有渲染代码
};

额外注意点 #

• 如果Books组件使用了React.memo做性能优化，需确保props变化时组件能正常更新，可通过添加自定义比较函数或移除不必要的memo包裹解决。
• Redux Slice中的状态更新逻辑是正确的，@reduxjs/toolkit的Immer已处理了不可变更新，状态本身的修改没有问题。

内容的提问来源于stack exchange，提问作者Pedro-Goncal