如何在Redux Saga执行增删改后调用接口刷新组件？

要实现员工新增、编辑、删除操作完成后自动获取最新列表数据，只需在每个操作的成功流程中触发列表获取动作即可，以下是具体实现方案：

方法一：在操作成功后直接触发列表刷新 #

修改saga.js中的删除、编辑处理函数，在接口请求成功并发送成功动作后，添加触发获取员工列表的逻辑：

修改后的saga.js #

import { call, put, takeEvery, takeLatest } from 'redux-saga/effects'
import axios from 'axios'
import { 
    GET_EMPLOYEE_LIST,
    GET_EMPLOYEE_LIST_SUCCESS,
    DELETE_EMPLOYEE,
    DELETE_EMPLOYEE_SUCCESS,
    EDIT_EMPLOYEE,
    EDIT_EMPLOYEE_SUCCESS
 } from './actions/EmployeeActions'
import ConstantList from '../../app/appConfig'
import { toast } from 'react-toastify'

const API_PATH = ConstantList.API_ENPOINT + "/employees"

export function* getEmployeeList() {
    yield takeEvery(GET_EMPLOYEE_LIST, workEmployeeList)
}

export function* deleteEmployee() {
    yield takeEvery(DELETE_EMPLOYEE, workDeleteEmployee)
}

export function* editEmployee() {
    yield takeEvery(EDIT_EMPLOYEE, workEditEmployee)
}

export function* workEmployeeList() {
    try {
        const url = API_PATH + '/search'
        const response = yield call(axios.post, url, {})

        yield put({
            type: GET_EMPLOYEE_LIST_SUCCESS,
            employeeList: response.data.data
        })

    } catch (error) {
        console.log("Request failed!")
    }
}

export function* workDeleteEmployee({id}) {
    try {
        const url = API_PATH + '/' + id
        yield call(axios.delete, url)

        toast.success("Delete Succeed!")
        
        yield put({
            type: DELETE_EMPLOYEE_SUCCESS,
            id
        })
        // 删除成功后触发最新列表获取
        yield put({ type: GET_EMPLOYEE_LIST })
    } catch (error) {
        toast.warning("Delete Failed!")
    }
}

export function* workEditEmployee({ id, employee}) {
    try {
        const url = API_PATH + '/' + id
        yield call(axios.put, url, employee)

        toast.success("Edit Succeed!")

        yield put({
            type: EDIT_EMPLOYEE_SUCCESS,
            id,
            employee
        })
        // 编辑成功后触发最新列表获取
        yield put({ type: GET_EMPLOYEE_LIST })
    } catch (error) {
        toast.warning("Edit Failed!")
    }
}

方法二：监听操作成功动作统一触发刷新（可选） #

如果后续有更多操作需要刷新列表，可以单独编写一个saga，监听所有操作成功的动作，统一触发列表获取，避免重复代码：

在saga.js中新增监听saga #

// 监听所有操作成功动作，统一触发列表刷新
export function* watchOperationSuccess() {
    yield takeEvery([DELETE_EMPLOYEE_SUCCESS, EDIT_EMPLOYEE_SUCCESS], workEmployeeList)
}

之后在根saga中注册这个新的saga即可。

额外修正：修复Reducer中的编辑逻辑 #

原EmployeeReducer.js中EDIT_EMPLOYEE_SUCCESS的处理逻辑存在错误，即使依赖列表刷新，也建议修正为正确的状态更新逻辑：

修改后的EmployeeReducer.js #

import { 
    DELETE_EMPLOYEE_SUCCESS,
    EDIT_EMPLOYEE_SUCCESS,
    GET_EMPLOYEE_LIST_SUCCESS
} from "../actions/EmployeeActions"

const initialState = {
    data: []
}

const EmployeeReducer = (state = initialState, action) => {
    switch (action.type) {
        case GET_EMPLOYEE_LIST_SUCCESS: {
            return {
                ...state,
                data: action.employeeList
            }
        }
        case DELETE_EMPLOYEE_SUCCESS: {
            return {
                ...state,
                data: state.data.filter(item => item.id !== action.id),
                openConfirmationDialog: false
            }
        }
        case EDIT_EMPLOYEE_SUCCESS: {
            return {
                ...state,
                data: state.data.map(item => 
                    item.id === action.id ? { ...item, ...action.employee } : item
                )
            }
        }
        default: 
            return { ...state }
    }
}

export default EmployeeReducer

说明 #

• 方法一适合操作较少的场景，代码直观；方法二更适合后续扩展更多操作的场景，便于维护。
• 修正后的Reducer确保即使未触发列表刷新，状态也能正确更新，提升代码健壮性。

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