在 Redux 中，在單個操作中調度多個減速器和案例是一種好習慣嗎？

Question

我有兩個減速器： errorReducer和userReducer 。

我有一個login操作：

export const login = (login) => (dispatch) => {
    axios.post("http://localhost:5000/login", login).then((res) => {
        if (res.data.token) {
            localStorage.setItem("token", res.data.token);
            dispatch({
                type: LOGIN_SUCCESS,
                payload: res.data,
            });
            dispatch({
                type: CLEAR_ERROR,
            });
        } else if (res.data.status === "Invalid credentials.") {
            dispatch({
                type: ERROR,
                payload: res.data.status,
            });
        }
    });
};

如您所見，如果登錄失敗，則會出現錯誤。 為用戶顯示一條錯誤消息。 但是，如果登錄成功，那么我需要使用另一個調度清除錯誤 state。 這是一個好習慣嗎？ 如果我不這樣做，那么錯誤將留在 state 中，我猜這不好。

如果我第一次嘗試成功登錄， CLEAR_ERROR運行，我不希望這樣。

如何在不調度的情況下重置login操作中的ERROR案例？

我也計划制作一個 loadingReducer，但是我也需要調度它。 是不是太多了？ 有沒有解決的辦法？ 我可以在 userReducer 中輸入錯誤和加載，但我也不確定這是否是一個好習慣。

錯誤減少器：

import { ERROR, CLEAR_ERROR } from "../actions/types";

const initialState = [];

export default function (state = initialState, action) {
    switch (action.type) {
        case ERROR:
            return action.payload;
        case CLEAR_ERROR:
            return [];
        default:
            return state;
    }
}

用戶減速器：

import { LOGIN_SUCCESS } from "../actions/types";

const initialState = {
    user: {},
    authenticated: false,
};

export default function (state = initialState, action) {
    switch (action.type) {
        case LOGIN_SUCCESS:
            return {
                ...state,
                loading: false,
                authenticated: true,
                ...action.payload,
            };
        default:
            return state;
    }
}

Answer 1

例如，我會使用效果在烤面包機中顯示錯誤消息。 不將其存儲在 state 中。

如果您確實想將其保留在 state 中，那么您可以 state 成功登錄意味着錯誤應該為空。 所以你可以在 LOGIN_SUCCESS 情況下處理它。

但是，您在兩個減速器中的狀態都不匹配。 它們應該是相同的 object。 所以在某個地方創建一個文件來導出 initialState 並在兩個 reducer 中使用它。