Redux中reducer未接收action、readAllEmployment调用异常问题

问题根因定位 #

核心问题是你没有将readAllEmployment这个异步action creator正确绑定到Redux的dispatch流程：
你直接调用了导入的readAllEmployment()，而这个异步action（基于redux-thunk规范）返回的是一个接收dispatch作为参数的函数，返回的函数没有被Redux执行，因此内部的axios请求、dispatch action的逻辑完全没有运行——这就是为什么你只能看到Hit Use Effect的日志，看不到action里的readAllEmployment Action日志。

解决方案 #

方案1：基于connect HOC修改（适配你现有写法） #

修改index.js代码，补充mapDispatchToProps配置，通过组件props调用绑定过dispatch的action：

import React, { useEffect } from 'react'
import { connect } from 'react-redux'
import { Carousel } from '../../components'
import { readAllEmployment } from '../../actions'
import './_resumeRender.scss'

// 接收props里绑定好的action
const ResumeRender = (props) => {
  useEffect(() => {
    console.log('Hit Use Effect')
    // 调用props里的action，不是直接调用导入的方法
    props.readAllEmployment()
  }, [props])
  return <></>
}

const mapStateToProps = (state) => ({
  resumeEmploymentReducer: state.resumeEmploymentReducer,
})
// 新增：把action creator传给connect，会自动包装dispatch逻辑
const mapDispatchToProps = {
  readAllEmployment
}

export default connect(mapStateToProps, mapDispatchToProps)(ResumeRender)

方案2：改用React-Redux Hooks写法（更简洁） #

如果你的项目支持React Hooks，可以直接用useDispatch、useSelector替代connect写法：

import React, { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { Carousel } from '../../components'
import { readAllEmployment } from '../../actions'
import './_resumeRender.scss'

const ResumeRender = () => {
  const dispatch = useDispatch()
  const resumeEmploymentState = useSelector(state => state.resumeEmploymentReducer)
  
  useEffect(() => {
    console.log('Hit Use Effect')
    dispatch(readAllEmployment())
  }, [dispatch])
  return <></>
}

export default ResumeRender

其他潜在问题提前修复 #

1. redux-thunk配置检查：确保你创建Redux store的时候已经正确注入了thunk中间件，否则异步action无法正常执行。
2. 跨域代理配置：你的后端服务跑在6060端口，如果前端服务端口不同，要在前端项目的package.json里添加配置"proxy": "http://localhost:6060"，否则axios请求会跨域失败。
3. 拼写错误修复：
   • action.js里DELETE_EMPLOYMENT的取值少了首字母D，当前是ELETE_EMPLOYMENT
   • action.js里EMPLOYMENT_LOADING的取值末尾多了一个空格，会导致reducer匹配不到对应action

修改完成后刷新页面，就能看到action和reducer的日志正常打印，Redux DevTools里的allEmployment字段也会更新为接口返回的数据。

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