时间戳

首页 > 解决方案 > Redux 使用对象的 id 更新状态

redux - Redux 使用对象的 id 更新状态

问题描述

我正在开发一个锻炼应用程序，用户可以在其中输入锻炼和体重。当他们这样做时，该名称/重量对象也被分配了一个 id。例如，状态可能如下所示：

[
  {
   movementName: squat,
   movementWeight: 100,
   id: 1
  },
  {
   movementName: bench press,
   movementWeight: 200,
   id: 2
  }
]

我遇到的问题是更新特定练习的重量并删除练习。使用我现在拥有的代码，我得到一个带有新 id 的新对象。例如，如果我正在更新我得到的深蹲：

[
  {
   movementName: squat,
   movementWeight: 100,
   id: 1
  },
  {
   movementName: squat,
   movementWeight: 200,
   id: 2
  }
]

如果我要删除深蹲，我会得到：

[
  {
   movementName: squat,
   movementWeight: 100,
   id: 1
  },
  {
   id: 2
  }
]

我知道我应该以某种方式使用对象 ID 来执行此操作，但我不知道如何。这是我的减速器：

const initialState = [];

const movementReducer = (state = initialState, action) => {
    switch (action.type) {
        case CREATE_MOVEMENT: 
            return [ 
                ...state, action.payload
            ];
        case UPDATE_MOVEMENT:
            return [
                ...state.map(item => item.movementName === action.payload.movementName ? action.payload : item)
            ];
        case DELETE_MOVEMENT:
            return [
                ...state.filter(item => item.movementName !== action.payload.movementName)
            ];
        default:
            return state;
    }
};

export default movementReducer;

我的行动：

export const updateMovement = formValues => async dispatch => {
    const response = await movements.post('/movements', formValues);

    dispatch({ type: constants.UPDATE_MOVEMENT, payload: response.data })
};

任何帮助或从哪里开始的提示将不胜感激。

标签： reduxreact-reduxstate

解决方案

您在这里做错的是使用运动名称来更新/删除，您应该使用运动 ID。将要更新/删除的 id 传递给减速器。然后您使用该 id 在 reducer 中更新/删除。

所以你的行动应该是：

export const updateMovement = (formValues) => async (dispatch) => {
  const response = await movements.put('/movements', formValues);

  // I assume that you can get the updated movement id from the response
  const updateId = response.data.id;
  dispatch({ type: constants.UPDATE_MOVEMENT, payload: { data: response.data, id: updateId } });
};

export const deleteMovement = (deleteId) => async (dispatch) => {
  const response = await movements.delete('/movements', deleteId);

  dispatch({ type: constants.DELETE_MOVEMENT, payload: { id: deleteId } });
};

在你的减速器中，你得到那个 id 来处理状态

const initialState = [];

const movementReducer = (state = initialState, action) => {
  switch (action.type) {
    case CREATE_MOVEMENT:
      return [...state, action.payload];
    case UPDATE_MOVEMENT:
      return state.map((item) =>
        item.id === action.payload.id ? { ...item, ...action.payload.data } : item,
      );
    case DELETE_MOVEMENT:
      return state.filter((item) => item.id !== action.payload.id);
    default:
      return state;
  }
};

export default movementReducer;

推荐阅读