如何使用diff方法更新状态

Question

我在react "react": "^17.0.0",中定义了这样的状态：

export interface IRoleState {
    data: API.InterviewList,
    menus: API.MenuItem,
    meta: {
        total: number
        per_page: number
        page: number
    }
}

当我收到来自服务器的响应时，我希望像这样更新menus项目：

*getMenuTree({payload: params}, effects) {
            if(!params) return;            
            const data = yield effects.call(menuPage,  params)
            if (data) {
                yield effects.put({
                    type: 'getTree',
                    payload: {
                        menus: data
                    }
                })
            }
        },

但是现在我发现它用菜单覆盖所有的值，如何使用diff方式更新菜单项？只更新菜单，保持其他值不变。我试过这样做：

yield effects.put({
                    type: 'getTree',
                    payload: {
                        ...,
                        menus: data
                    }
                })

似乎不起作用。这是国家的完整代码：

import { Effect, Reducer, Subscription } from 'umi';
import { rolePage } from '@/services/ant-design-pro/permission/role/role';
import { menuPage } from '@/services/ant-design-pro/permission/menu/menu';

export interface IRoleState {
    data: API.InterviewList,
    menus: API.MenuItem,
    meta: {
        total: number
        per_page: number
        page: number
    }
}

interface IRoleModel {
    namespace: 'roles'
    state: IRoleState
    reducers: {
        getPage: Reducer<IRoleState>,
        getTree: Reducer<IRoleState>
    }
    effects: {
        getRolePage: Effect,
        getMenuTree: Effect
    }
    subscriptions: {
        setup: Subscription
    }
}


const RoleModel: IRoleModel = {
    namespace: 'roles',
    state: {
        data: {},
        menus: {},
        meta: {
            current: 1,
            pageSize: 10,
            page: 1
        }
    },
    reducers: {
        getPage(state, action) {
            return action.payload
        },
        getTree(state, action){
            return action.payload
        },
    },
    effects: {
        *getRolePage({payload: params}, effects) {
            if(!params) return;            
            const data = yield effects.call(rolePage,  params)
            if (data) {
                yield effects.put({
                    type: 'getPage',
                    payload: {
                        data: data,
                        meta: {
                            ...params
                        }
                    }
                })
            }
        },
        *getMenuTree({payload: params}, effects) {
            if(!params) return;            
            const data = yield effects.call(menuPage,  params)
            if (data) {
                yield effects.put({
                    type: 'getTree',
                    payload: {
                        menus: data
                    }
                })
            }
        },
    },
    subscriptions: {
        setup({ dispatch, history }, done) {
            return history.listen((location, action) => {
                if(location.pathname === '/users' || location.pathname === '/my') {
                    dispatch({
                        type: 'getRemove',
                        payload: {
                            page: 1,
                            per_page: 5
                        }
                    })
                }
            })
        }
    }
};
export default RoleModel;

Answer 1

我假设您使用的是redux-saga，在这种情况下，您可以在redux减速器中扩展当前状态。

...
return {
  ...state,
  menus: action.payload.menus
}
...

或者，您可以通过选择器获取saga中的数据，并将整个数据发送到减缩器，但我不推荐。