如何更新redux reducer中的状态

Question

减速器.js

这是我的initialState

const initialState = {
transfusions: [],
};

这是我的Switch逻辑

export default function (state = initialState, action) {
switch (action.type) {
case GET_TRANSFUSIONS:
return {
...state,
transfusions: action.payload,
};
case ADD_TRANSFUSION:
return {
...state,
transfusions: [...state.transfusions, action.payload],
};
case UPDATE_TRANSFUSION:
console.log(action.payload)
return {
...state,
transfusions: state.transfusions.map(
(transfusion) => transfusion.id === action.payload.id ? {
...state,
transfusion: action.payload
} : transfusions
),
};
case DELETE_TRANSFUSION:
return {
...state,
transfusions: state.transfusions.filter(
(transfusion) => transfusion.id !== action.payload
),
};
default:
return state;
}
}

我在后台成功更新，但我如何更新前端。我尝试过这种方法，它可以工作，但它总是需要刷新页面来向我显示更新的数据。

Answer 1

transfusions: state.transfusions.map(依赖于旧状态，因此始终落后一步

你可以修改你的代码如下：

const transfusionExists = state.transfusions.find(t => t.id === action.payload.id)
if(!transfusionExists) state.transfusions.push(action.payload)
return {
...state
),
};

Answer 2

终于解决了我的问题。我用了这个代码：

case UPDATE_TRANSFUSION:
const transfusionsExisted = state.transfusions.filter(
(transfusion) => transfusion.id !== action.payload.id
);
return {
transfusions: [action.payload, ...transfusionsExisted],
};

我先删除了要更新的记录，然后推送了新记录。

如果你像我一样遭受这个问题的折磨，我希望它能帮助你。