Redux Saga搭配React函数组件的加载状态标识处理最佳实践问询

针对函数组件使用useEffect触发请求时首次渲染loading状态未生效导致的内容闪现问题，结合redux-saga的特性，以下是三种生产环境常用的最优方案：

1. 自定义Hook结合唯一请求ID #

将Redux中的请求状态按唯一ID拆分存储，每个组件触发请求时生成专属的请求ID，完全避免多组件共用状态的冲突问题，同时组件本地初始化loading为true，从根源解决首次渲染闪现错误内容的问题：

// saga逻辑改造，接收请求ID，完成后返回对应ID的状态
function* watchApiRequest() {
  takeEvery('START_API_REQUEST', function* (action) {
    const { requestId } = action.payload
    try {
      const data = yield call(yourApiFetch)
      yield put({ 
        type: 'API_REQUEST_SUCCESS', 
        payload: { requestId, data } 
      })
    } catch (e) {
      yield put({ 
        type: 'API_REQUEST_ERROR', 
        payload: { requestId, error: e } 
      })
    }
  })
}

// 自定义封装请求Hook
const useSagaRequest = () => {
  // 生成当前请求专属ID
  const [requestId] = useState(() => Math.random().toString(36).slice(2))
  // 初始loading直接设为true，首次渲染就显示加载态
  const [isLoading, setIsLoading] = useState(true)
  const dispatch = useDispatch()
  // 只监听当前ID对应的请求状态
  const requestStatus = useSelector(state => state.api.requests[requestId]?.status)

  useEffect(() => {
    dispatch({ type: 'START_API_REQUEST', payload: { requestId } })
  }, [dispatch, requestId])

  // 请求完成后更新本地loading状态
  useEffect(() => {
    if (['success', 'error'].includes(requestStatus)) {
      setIsLoading(false)
    }
  }, [requestStatus])

  // 组件卸载时清理Redux中的冗余状态
  useEffect(() => {
    return () => {
      dispatch({ type: 'CLEAR_REQUEST_STATUS', payload: { requestId } })
    }
  }, [dispatch, requestId])

  return isLoading
}

组件使用时直接调用该Hook即可，无需做额外处理：

function SimpleComponent() {
  const isLoading = useSagaRequest()

  if (isLoading) {
    return <LoadingComponent />
  }
  return <ContentThatWillBreakIfApiCallIsNotFinished />
}

2. 组件内动态运行saga任务 #

如果不需要在Redux中存储请求状态，可以直接在组件内运行saga任务，loading状态完全保存在组件本地，和redux-thunk的自定义Hook方案逻辑一致：

import { useStore } from 'react-redux'
import { runSaga, call } from 'redux-saga/effects'

const useSagaWithLocalLoading = (sagaTask, ...taskArgs) => {
  const [isLoading, setIsLoading] = useState(true)
  const store = useStore()

  useEffect(() => {
    let isCancelled = false
    // 在组件内动态运行saga任务
    runSaga(
      {
        dispatch: store.dispatch,
        getState: store.getState
      },
      function* () {
        try {
          yield call(sagaTask, ...taskArgs)
        } finally {
          if (!isCancelled) {
            setIsLoading(false)
          }
        }
      }
    )
    return () => {
      isCancelled = true
    }
  }, [store, sagaTask, taskArgs])

  return isLoading
}

该方案完全不需要改造现有saga逻辑和Redux状态结构，适合快速迭代的业务场景。

3. 全局loading状态按业务维度拆分 #

如果确实需要全局共享loading状态，不要使用单一的isLoading字段，而是按业务请求类型拆分存储：

// Redux状态结构示例
{
  loading: {
    fetchArticleList: false,
    fetchUserInfo: false,
    submitComment: false
  }
}

saga中对应请求启动时将对应业务字段设为true，请求结束（成功/失败）后设为false，组件只读取自身业务对应的loading字段，也能避免多组件冲突。如果同个业务接口可能被多个组件同时触发，可以在对应字段下存储请求计数，计数>0时认为是加载中，避免某个组件卸载重置状态影响其他正在调用的组件。

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