[英]Is it a good practice in Redux to dispatch multiple reducers and cases in a single action?
我有两个减速器: 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;
}
}
例如,我会使用效果在烤面包机中显示错误消息。 不将其存储在 state 中。
如果您确实想将其保留在 state 中,那么您可以 state 成功登录意味着错误应该为空。 所以你可以在 LOGIN_SUCCESS 情况下处理它。
但是,您在两个减速器中的状态都不匹配。 它们应该是相同的 object。 所以在某个地方创建一个文件来导出 initialState 并在两个 reducer 中使用它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.