React Native使用Redux时Action无法向Reducer传递数据问题求解

问题根因 #

你的代码核心问题出在组件侧的状态订阅和Action调用逻辑：

• 直接调用了异步Action，没有通过dispatch触发，冷启动时请求根本没有执行，热重载时复用了之前的缓存数据才会正常显示
• useFocusEffect里的useCallback依赖数组为空，Redux中categories更新后无法触发回调同步到本地state
• 多此一举把Redux里的状态转存到本地state，反而增加了状态同步的bug风险

修复步骤 #

1. 修正异步Action调用逻辑
   如果你使用函数组件，需要先通过useDispatch获取dispatch方法，再触发Action：

import { useDispatch, useSelector } from 'react-redux'
import CategoriesAction from './你的Action文件路径'

// 组件内部代码
const dispatch = useDispatch()

useEffect(() => {
  // 必须用dispatch包裹异步Action才能触发thunk执行
  dispatch(CategoriesAction())
}, [dispatch])

2. 删掉多余的本地状态同步逻辑
   不需要将Redux里的categories再存到本地useState，直接用useSelector订阅Redux状态即可，数据更新时会自动触发组件重渲染拿到最新值：

// 直接订阅Redux中的分类状态
const { categories, isLoading, error } = useSelector(state => state.categories)

// 渲染时直接使用categories变量即可，无需额外同步

如果你确实有特殊场景需要转存到本地state，需要把categoriesReducer加到useCallback的依赖数组中：

useFocusEffect(
  useCallback(() => {
    if (categoriesReducer !== null) {
      setCategories(categoriesReducer)
    }
  }, [categoriesReducer]) // 新增依赖
)

3. 额外校验项

• 确认创建Redux store时已经正确注册了redux-thunk中间件，否则异步Action无法正常执行
• 确认CATEGORIES_STATE、CATEGORIES_SUCCESS、CATEGORIES_FAILED三个常量在Action和Reducer文件中是同一个引用，没有出现拼写错误、重复定义的问题
• 可以在Action的Axios请求回调中加日志，确认冷启动时请求正常发送、拿到了返回数据

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