能否在Redux Reducer中初始化状态时调用接口移除useEffect？

能不能删掉组件里的useEffect，直接在Reducer初始化certainProp的时候调用fetchCertainProp()？知道可以用redux-thunk，但不知道具体怎么实现，就是不想写多余的useEffect。

现有代码片段 #

主Reducer #

function thisFunction(state = new state, action) {
  switch(type) { // 注：原代码漏写action.type，此处需修正
    case INIT_STATE:
      return {
        ...state, 
        ...action.state
      }
    default:
      return {
        // 原代码漏展开原state，会丢失其他状态属性，此处补上
        ...state,
        certainProp: setCertainProp(state.certainProp, action)
      }
  }
}

子Reducer #

function setCertainProp(state = {}, action) {
  const { type } = action
  switch (type) {
    case SET_CERTAIN_PROP:
      return action.certainProp
    default:
      return state
  }
}

Action创建函数 #

function setCertainPropAction(prop){
  return {
    type: SET_CERTAIN_PROP, // 原代码漏写逗号，此处修正
    certainProp: prop // 原代码属性名写为"action"，与子Reducer取值不匹配，修正为certainProp
  }
}

组件中的异步逻辑 #

useEffect(() => {
  // 原代码漏写dispatch，Redux中必须通过dispatch触发Reducer
  fetchCertainProp().then(response => dispatch(setCertainPropAction(response)))
}, [])

首先明确：Reducer里绝对不能直接写异步请求。Reducer必须是纯函数，不能包含任何副作用（比如网络请求、DOM操作、定时器等），否则会彻底破坏Redux状态的可预测性，这是Redux的核心规则。

要去掉组件里的useEffect，用Redux-Thunk完全可以做到，核心思路是把异步逻辑封装到Thunk Action中，在应用初始化时触发这个Action，而非在组件内触发。具体步骤如下：

1. 配置Redux-Thunk中间件 #

先将Thunk添加到Redux中间件中，这样Store才能支持异步Action：

import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import rootReducer from './path/to/rootReducer'

const store = createStore(
  rootReducer,
  // 启用Thunk中间件
  applyMiddleware(thunk)
)

2. 编写异步Thunk Action #

创建一个返回函数的Action（这是Thunk的核心特点），在函数内部封装异步请求逻辑，拿到数据后分发同步Action更新状态：

// 异步Action：获取数据并更新state
export const fetchAndSetCertainProp = () => {
  // Thunk可以直接获取dispatch方法
  return async (dispatch) => {
    try {
      // 发起异步请求
      const response = await fetchCertainProp()
      // 请求成功后，分发同步Action更新状态
      dispatch(setCertainPropAction(response))
    } catch (err) {
      // 可在此处理请求失败场景，比如分发错误提示Action
      // dispatch({ type: 'SET_CERTAIN_PROP_ERROR', error: err })
    }
  }
}

3. 在应用启动时触发异步Action #

不需要在组件内写useEffect，直接在应用入口文件（比如index.js）中，让Store触发这个Thunk Action即可：

// 入口文件中，创建完Store后直接触发
store.dispatch(fetchAndSetCertainProp())

这样应用一启动就会自动发起请求，拿到数据后更新certainProp，完全不需要依赖组件的useEffect。

补充说明 #

• 如果该数据并非全局初始化所需，而是进入特定路由页面才需要，可将store.dispatch(fetchAndSetCertainProp())放到路由守卫或对应页面组件的useEffect中；若为全局数据，入口文件直接触发是最简洁的方案。
• 原代码中的语法错误已修正，比如Reducer中的switch(type)需改为switch(action.type)、主Reducer默认分支需展开原state避免丢失属性等，这些细节会直接影响代码运行效果，需注意。

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