Redux Reducer Switch语句异常求助：MERN项目数据获取问题

刚上手Redux踩这种坑太正常了，我当初也对着控制台的default分支输出懵了好半天😅。结合你描述的现象——能进入对应分支打印数据，但随后多次进入default，组件拿到null，大概率是异步Action处理、Reducer返回值或者状态匹配的问题，咱们一步步来排查：

一、先搞定异步Action的正确写法（最常见原因） #

你是调用Express API的异步请求，如果没用redux-thunk这类中间件处理异步，直接在Action里返回Promise的话，Redux会收到非标准的Action对象，导致Reducer匹配不到，只能走default分支。

错误的Action写法（别这么写） #

export const fetchData = () => {
  // 这里返回的是Promise，不是Redux需要的Action对象
  return axios.get('/api/data')
    .then(res => ({ type: 'FETCH_DATA_SUCCESS', payload: res.data }))
}

正确的异步Action写法（用redux-thunk） #

首先确保安装了redux-thunk：npm install redux-thunk，然后配置到store里：

// store/index.js
import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import rootReducer from '../reducers'

export const store = createStore(rootReducer, applyMiddleware(thunk))

然后修改你的Action，用dispatch分发正确的Action对象：

export const fetchData = () => {
  return async (dispatch) => {
    // 可以加个请求中的Action，方便处理loading状态
    dispatch({ type: 'FETCH_DATA_REQUEST' })
    try {
      const res = await axios.get('/api/data')
      // 请求成功后分发成功Action
      dispatch({ type: 'FETCH_DATA_SUCCESS', payload: res.data })
    } catch (err) {
      // 失败时分发失败Action
      dispatch({ type: 'FETCH_DATA_FAILURE', payload: err.message })
    }
  }
}

二、检查Reducer的返回值是否规范 #

Reducer必须返回新的状态对象，不能直接修改原状态，而且每个分支（包括default）都必须返回状态，否则状态会变成undefined，组件里就显示成null了。

错误的Reducer写法（坑点多） #

const initialState = { data: null, loading: false, error: null }

const dataReducer = (state = initialState, action) => {
  switch(action.type) {
    case 'FETCH_DATA_SUCCESS':
      // 直接修改原state，Redux检测不到状态变化
      state.data = action.payload
      console.log(action.payload) // 这里能打印，但状态没更新
      // 没写return！状态会变成undefined
    case 'FETCH_DATA_FAILURE':
      state.error = action.payload
      return state
    default:
      // 没返回原状态，触发其他Action时状态会丢
      console.log('default branch')
  }
}

正确的Reducer写法 #

const initialState = { data: null, loading: false, error: null }

const dataReducer = (state = initialState, action) => {
  switch(action.type) {
    case 'FETCH_DATA_REQUEST':
      // 返回新对象，保留原状态的其他属性，只更新loading
      return { ...state, loading: true, error: null }
    case 'FETCH_DATA_SUCCESS':
      console.log(action.payload)
      return { 
        ...state, 
        data: action.payload, 
        loading: false 
      }
    case 'FETCH_DATA_FAILURE':
      return { 
        ...state, 
        error: action.payload, 
        loading: false 
      }
    default:
      // 必须返回原状态，不能省略！
      return state
  }
}

这里要注意：

• 每个case都要有return，且返回新对象（用扩展运算符...state复制原状态，再修改需要更新的属性）
• default分支一定要返回原state，否则任何不匹配的Action都会让状态变成undefined

三、检查Action类型的拼写一致性 #

别小看拼写错误！比如Action里写的是'FETCH_DATA_SUCCESS'，Reducer里写成'FETCH_DATA_SUCCES'（少了个S），这时候虽然能触发Action，但Reducer匹配不到，只能走default分支。最好把Action类型定义成常量，避免手滑：

// actionTypes.js
export const FETCH_DATA_REQUEST = 'FETCH_DATA_REQUEST'
export const FETCH_DATA_SUCCESS = 'FETCH_DATA_SUCCESS'
export const FETCH_DATA_FAILURE = 'FETCH_DATA_FAILURE'

然后在Action和Reducer里引用这些常量，就不会写错了。

四、确认组件获取状态的路径正确 #

如果你的rootReducer是用combineReducers合并的多个Reducer，那获取状态的路径要对应：

比如rootReducer是这样的：

import { combineReducers } from 'redux'
import dataReducer from './dataReducer'

const rootReducer = combineReducers({
  dataReducer: dataReducer
})

那组件里用useSelector获取状态时，要写对路径：

import { useSelector } from 'react-redux'

const MyComponent = () => {
  // 正确：state.dataReducer.data
  const data = useSelector(state => state.dataReducer.data)
  // 错误：直接state.data会拿到undefined
  console.log(data)
  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>
}

按照这几个步骤排查，应该就能解决你遇到的问题了！

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