how to update the state using diff way - reactjs

Question

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;

Answer 1

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.