Reducer 未在 redux 中接收操作或被调用的操作有问题

Question

我正在研究 MERN 堆栈。数据库正确地发布到路由，但在尝试读取所有数据库条目时，reducer 没有收到操作。前端可能未正确命中操作 readAllEmployment()，但信息确实在 PostMan 中呈现。

index.js

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

const ResumeRender = () => {
useEffect(() => {
    console.log('Hit Use Effect')
    readAllEmployment()
  }, [])
return <></>
}

const mapStateToProps = (state) => ({
  resumeEmploymentReducer: state.resumeEmploymentReducer,
})

export default connect(mapStateToProps)(ResumeRender)

route.js

// load Model
const employmentModel = require('../models/employmentModel')

// @Route   GET api/employment/
// @Desc    Read All Employment
// @Action  readAllEmployment()
// @Access  Private
router.get('/', async (req, res) => {
  console.log('readAllEmployment Route')
  try {
    const employment = await employmentModel.find().sort('endDate')
    if (employment.length <= 0) {
      return res.status(400).json({
        errors: [{ msg: 'No employment was found' }],
      })
    }

    return res.json(employment)
  } catch (err) {
    console.error(err.message)
    return res.status(500).send('Server Error')
  }
})

reducer.js

import {
  GET_ALL_EMPLOYMENT,
  GET_ONE_EMPLOYMENT,
  DELETE_EMPLOYMENT,
  RESET_EMPLOYMENT,
  EMPLOYMENT_LOADING,
  EMPLOYMENT_FAIL,
  EMPLOYMENT_SUCCESS,
} from '../actions'

const resumeEmploymentReducer = (
  state = {
    allEmployment: [], // Pulls in all employment
    employment: null, // Pulls in Specific employment
    loading: false, // Has everything need been loaded
    success: {},
    error: {},
  },
  action,
) => {
  const { type, payload } = action
  switch (type) {
    case GET_ALL_EMPLOYMENT:
      console.log('GET_ALL_EMPLOYMENT Reducer')
      return {
        ...state,
        allEmployment: payload,
        loading: false,
      }
    case GET_ONE_EMPLOYMENT:
      return {
        ...state,
        employment: payload,
        loading: false,
      }
    case DELETE_EMPLOYMENT:
      return {
        ...state,
        allEmployment: payload,
        loading: false,
      }
    case RESET_EMPLOYMENT:
      return {
        ...state,
        employment: null,
        loading: false,
      }
    case EMPLOYMENT_LOADING:
      return {
        ...state,
        loading: true,
        employment: null,
        error: {},
      }
    case EMPLOYMENT_FAIL:
      return {
        ...state,
        error: payload,
        allEmployment: [],
        employment: null,
        loading: false,
      }
    case EMPLOYMENT_SUCCESS:
      return {
        ...state,
        success: payload,
      }
    default:
      return state
  }
}

export default resumeEmploymentReducer

action.js

export const GET_ALL_EMPLOYMENT = 'GET_ALL_EMPLOYMENT'
export const GET_ONE_EMPLOYMENT = 'GET_ONE_EMPLOYMENT'
export const DELETE_EMPLOYMENT = 'ELETE_EMPLOYMENT'
export const RESET_EMPLOYMENT = 'RESET_EMPLOYMENT'
export const EMPLOYMENT_LOADING = 'EMPLOYMENT_LOADING '
export const EMPLOYMENT_FAIL = 'EMPLOYMENT_FAIL'
export const EMPLOYMENT_SUCCESS = 'EMPLOYMENT_SUCCESS'

// @Route   GET api/employment
// @Desc    Read All Employment
// @Action  readAllEmployment()
// @Access  Private
export const readAllEmployment = () => async (dispatch) => {
  console.log('readAllEmployment Action')
  try {
    const res = await axios.get('/api/employment/')
    dispatch({
      type: GET_ALL_EMPLOYMENT,
      payload: res.data,
    })
  } catch (err) {
    if (err.response.data.errors) {
      dispatch({
        payload: { msg: err.response.statusText, status: err.response.status },
      })
    }

    dispatch({
      type: EMPLOYMENT_FAIL,
      payload: { msg: err.response.statusText, status: err.response.status },
    })
  }
}

Redux 开发工具

resumeEmploymenrReducer
  allEmployment: []
  employment: null
  loading: false
  success: { }
  error: { }

控制台

Hit Use Effect

航站楼

[1] Compiled successfully!
[0] Server is running on port 6060
[0] Database connected!
[0] readAllEmployment Route

邮递员

GET: http://localhost:6060/api/employment/

BODY RETURNS
[
    {
        "_id": "614b517cbc3fdc6d0d82ec4d",
        "title": "Job Title",
        "employmentType": "Full-Time",
        "company": "Compnay Name",
        "locationCity": "City",
        "locationState": "State",
        "startDate": "01-01-2021",
        "endDate": "01-01-2021",
        "description": "Description",
        "__v": 0
    }
]

Answer 1

我认为您可能需要利用 react-redux 库中的 useDispatch。

import { useDispatch } from 'react-redux';
import { readAllEmployment } from '../../actions';

const ResumeRender = () => {
  const dispatch = useDispatch()

  useEffect(() => {
    console.log('Hit Use Effect')
    dispatch(readAllEmployment())
  }, [])

  return <></>
}

export default ResumeRender

Reducer 未在 redux 中接收操作或被调用的操作有问题

Reducer not receiving action in redux or trouble with the action being called

reactjs

redux

routes

redux-reducers

redux-actions