React Native中dispatch redux action后如何重新触发useEffect执行？

解决方案 #

问题1：更新dataB后自动拉取最新dataA（避免无限循环） #

无限循环的核心原因是：把dataA作为useEffect依赖时，每次拉取接口更新store里的dataA都会触发引用变化，进而再次执行useEffect的dispatch逻辑，形成死循环。你要监听的触发源是dataB的更新动作，而非dataA本身，有两种可行方案：

方案1：异步逻辑聚合（更推荐）

如果你使用redux-thunk/redux-toolkit的异步Thunk封装更新dataB的请求，可以直接在updateDataB的请求完成逻辑里，同步触发拉取dataA的action，无需在组件层处理依赖：

// 更新dataB的异步action示例
export const updateDataB = (params) => async (dispatch) => {
  try {
    const res = await api.updateDataB(params)
    dispatch(setDataB(res.data))
    // 直接在这里触发拉取dataA的action，替换为你自己封装的对应action名
    dispatch(fetchDataA())
  } catch (err) {
    // 错误处理逻辑
  }
}

方案2：组件层监听dataB变化

如果不方便修改action逻辑，直接把useEffect的依赖项替换为dataB即可：

import { useSelector } from 'react-redux'

// 组件内从store取dataB，替换yourReducerName为你对应的reducer命名空间
const dataB = useSelector(state => state.yourReducerName.dataB)

useEffect(() => {
  // 替换为你自己封装的拉取dataA的action
  dispatch(fetchDataA())
}, [dispatch, dataB])

初始化时会执行一次拉取逻辑符合原有需求，每次dataB更新后也会重新拉取最新的dataA，不会出现无限循环。

问题2：更新dataB后弹出对应提示框 #

监听dataB.result的变化即可，新增ref标记首次渲染状态，避免初始化时误触发提示：

import { useRef, useEffect } from 'react'
import { useSelector } from 'react-redux'
import { Alert } from 'react-native'

// 替换yourReducerName为你对应的reducer命名空间
const dataB = useSelector(state => state.yourReducerName.dataB)
// 标记是否为首次渲染
const isFirstRender = useRef(true)

useEffect(() => {
  // 跳过首次渲染的提示
  if (isFirstRender.current) {
    isFirstRender.current = false
    return
  }
  // 只有result存在时才弹提示
  if (dataB.result) {
    const { success, Message } = dataB.result
    Alert.alert(success ? '操作成功' : '操作失败', Message)
  }
}, [dataB.result])

如果你的场景允许初始化时也根据已有result弹提示，去掉ref的判断逻辑即可。

内容的提问来源于stack exchange，提问作者lohith kumar gangadevi