时间戳

首页 > 解决方案 > React/Redux - 编辑列表项后列表不更新

reactjs - React/Redux - 编辑列表项后列表不更新

问题描述

我有一个显示在表格中的对象列表。编辑列表中的项目时，除非我刷新页面，否则不会显示更新的项目。

列表减速器

export const eaCodesReducer = (state = initialState.eaCodes, action) => {
    switch (action.type) {
        case "GET_EA_CODES": {
            return {
                ...state,
                eaCodes: action.payload
            }
        }
        default: {
            return state
        }
    }
}

单品减速机

export const eaSingleEaCodeReducer = (state = initialState.eaCode, action) => {
    switch (action.type) {
        case "UPDATE_EA_CODE": {
            return {
                ...state,
                eaCode: action.payload
            }
        }
        default:
            return state
    }
}

然后我如何告诉它更新 eaCodes 列表以合并单个项目更改？

标签： reactjsreact-redux

解决方案

@D10S 有正确的想法，但导致应用程序崩溃。而不是添加额外的减速器 - 如果初始放置请求成功，我更新了调用减速器的操作：

export const updateEnforcementActionCode = (id, updateTypeObj) => {
    return dispatch => {
        return axios.put(`/api/enforcementactions/codes/${id}`, updateTypeObj)
            .then(res => {
                dispatch({ type: "UPDATE_EA_CODE", payload: res.data })
                if (res.status === 200) {
                    return axios.get('/api/enforcementactions/codes')
                        .then(res => {
                            dispatch({ type: "GET_EA_CODES", payload: res.data })
                        })
                }
            }).catch(err => {
                dispatch({ type: "GET_ERRORS", payload: err.response.message })
            })
    }
}

这似乎有点多余。如果有人建议让这个更光滑，我很开放。

推荐阅读