I am define the state in react "react": "^17.0.0", like this:

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

when I received the response from server, I want to update the menus item like this:

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

But now I found it override all values with menus, how to update the menu item using the diff way? Only update menus, keep other value do not change. I have tried like this:

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

seems could not work. This is the full code of the state:

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;

CodePudding user response：

I assume you are using redux-saga, in that case, you can spread the current state in your redux reducer.

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

Or You can get the data in saga via selectors and send the whole data to reducer but I won't recommend that.