时间戳

首页 > 解决方案 > React-Redux：清理状态

reactjs - React-Redux：清理状态

问题描述

在我的应用程序中，我做了两个相关的获取。From the first get I get all the ids, when one of these ids is chosen, it is used to make a new api call that gives me back some data.

所以在第一次得到之后，我遇到了这样的情况：

docent:  (2) [{…}, {…}]
          0: {id: "12", name: "Name1", surname: "Surname1"}
          1: {id: "13", name: "Name2", surname: "Surname2"}
          length: 2__proto__: Array(0)

agenda:  []

在用户选择其中一个 id 后，议程数组也会填充根据该 id 检索到的信息，例如：

agenda:   (2) [{…}, {…}]
          0: {id: "1", docent_id: "12", date: "2020-05-27", start_at: "09:00:00", end_at: "10:00:00"}
          1: {id: "2", docent_id: "12", date: "2020-05-27", start_at: "10:00:00", end_at: "11:00:00"}
          length: 2

我的问题是：如果用户再次更改docent数组的 id，议程数组变为：

agenda:  (3) [{…}, {…}, {…}]
         0: {id: "1", docent_id: "12", date: "2020-05-27", start_at: "09:00:00", end_at: "10:00:00"}
         1: {id: "2", docent_id: "12", date: "2020-05-27", start_at: "10:00:00", end_at: "11:00:00"}
         2: {id: "3", docent_id: "13", date: "2020-05-28", start_at: "09:00:00", end_at: "10:00:00"}
         length: 3

所以我有过去的信息和新的信息。

我希望能够删除保存在议程中的信息，以防用户更改讲解员的 ID。我能怎么做？

行动：

export const agendaList = (id, agenda) => {
    return (dispatch) => {
        fetch(api + id, {
            headers: {
                Accept: "application/json",
            },
        })
            .then((result) => result.json())
            .then((agenda) => {
                dispatch({
                    type: "AGENDA_LIST",
                    agenda: agenda
                });
            })
            .catch((error) => console.log("An error occurred.", error));
    };

减速机：

const initialState = {
agenda: []
}
export const reducer = (state = initialState , action) => {
case 'AGENDA_LIST':
            return {...state, agenda: [...state.agenda, ...action.agenda]};
        default: 
            return state;
    }

标签： reactjsredux

解决方案

您的 reducer 正在合并当前状态和操作数据：

return {...state, agenda: [...state.agenda, ...action.agenda]};

您想替换当前的状态议程：

return {
  ...state,
  agenda: action.agenda
};

推荐阅读