redux 动态地将属性添加到对象

Question

您好，我有一个 reducer，其中包含一个 array 和 objects。这些objects 有一些属性。当我在redux 中使用useDispatch Hook dispatch 和action 时，我想动态添加更多属性。我怎样才能实现这个目标

//reducer数据

    users: [
    {
      id: 1,
      first_name: "JACKILINE",
      status: "online",
    },
    {
      id: 2,
      first_name: "BRONNNZE",
      status: "offline",
      
     },
  ];

我想动态添加这两个属性mesg: "how are you",lastSeenDate: "30/11/19", 如何更新reducer中的状态

//我想要在 dispatch 一个 action 后像这样的 reducer

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",
     
    },
  ],
      `

//我的行动

export const setLastMessage = (payload) => ({
  type: actionTypes.SET_LAST_MESSAGE,
  payload: {
    id: payload.id,
    lastSeenDate: payload.date,
    mesg:payload.message
    
  },
});

Answer 1

我不确定您到底想做什么，但我想您可以在获得 users 时执行此操作，而不是在导入时执行。

你如何得到users？

请尝试在您的切片文件中执行此操作（可能是 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));
};

或者你可以在你的组件中导入users时做类似的事情。

希望这对你有帮助。

Answer 2

你必须添加动作创建者：

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))
     }
 }

在减速器中：

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
    }
}

您可以使用dispatch(handleActionFun(msg, lastSeenDate)) 调用它