redux add property to object dynamically - reactjs

Question

Hi i have a reducer containing one array of objects. These objects have some properties. When i dispatch an action in redux using useDispatch Hook i want to add some more properties dynamically.How can i achive this thing
//reducer data
users: [
{
id: 1,
first_name: "JACKILINE",
status: "online",
},
{
id: 2,
first_name: "BRONNNZE",
status: "offline",
},
];
I want to add these two properties dynamically mesg: "how are you",lastSeenDate: "30/11/19", How can i update the state in reducer
//i want the reducer like this after dispatching an action
users: [
{
id: 1,
first_name: "JACKILINE",
status: "online",
mesg: "how are you",
lastSeenDate: "30/11/19",
},
{
id: 2,
first_name: "BRONNNZE",
status: "offline",
mesg: "how are you",
lastSeenDate: "30/11/19",
},
],
`
//My action
export const setLastMessage = (payload) => ({
type: actionTypes.SET_LAST_MESSAGE,
payload: {
id: payload.id,
lastSeenDate: payload.date,
mesg:payload.message
},
});

Answer 1

I am not sure what you exactly want to do, but I guess you could do it when you get users rather when you import it.
How do you get users?
Please try to do this in your slice file(maybe src/slices/user.js).
const initialState = {
users: []
}
const slice = createSlice({
name: 'user',
initialState,
reducers: {
getUsers(state, action) {
const { users } = action.payload;
state.users = users.map(user => ({
...user,
mesg: "how are you",
lastSeenDate: "30/11/19"
}))
},
}
});
export const reducer = slice.reducer;
export const getUsers = () => async (dispatch) => {
const response = await axios.get('/api/users');
dispatch(slice.actions.getUsers(response.data));
};
Or you could do the similar thing while importing users in your component.
Hope this would be helpful for you.

Answer 2

You have to add action creator:
export const ANY_ACTION = 'ANY_ACTION';
function actionFun (msg, lastSeenDate) {
return {
type: ANY_ACTION,
msg,
lastSeenDate
}
}
export function handleActionFun (msg, lastSeenDate) {
return (dispatch) => {
return dispatch(actionFun(msg, lastSeenDate))
}
}
In Reducer:
import { ANY_ACTION } from './actionCreators';
export default function users (state = [], action) {
switch (action.type) {
case ANY_ACTION :
return state.map(u => {
return u.mesg = action.msg, u.lastSeenDate = action.lastSeenDate;
})
default :
return state
}
}
You can call it using dispatch(handleActionFun(msg, lastSeenDate))