如何解决Redux:让 successReducer 和 errorReducer 集中化 http 响应管理有意义吗?
我遵循了在 errorReducer 文件中使用 Redux 集中化 React 应用程序错误管理的教程:
errorReducer.js
import { GET_ERRORS } from "../actions/types";
const initialState = {};
export default function (state = initialState,action) {
switch (action.type) {
case GET_ERRORS:
return action.payload;
default:
return state;
}
}
这样,每当任何 http 请求出现错误时,错误的内容只会存储在应用程序的一个地方:
authActions.js
export const registeruser = (userData,history) => (dispatch) => {
axios
.post("/api/users/register",userData)
.then((res) => {
history.push("/login-page");
})
.catch((err) => {
dispatch({
type: GET_ERRORS,payload: err.response.data,});
});
};
这就是在 Register
组件中管理错误响应的方式:
注册页面.js
export class RegisterPage extends Component {
constructor() {
super();
this.state = {
errors: {},};
}
componentWillReceiveProps(nextProps) {
if (nextProps.errors) {
this.setState({ errors: nextProps.errors });
}
}
render() {
const { errors } = this.state;
return (
<>
<div>
{Object.values(errors).map((value) => (
<p>{value}</p>
))}
</div>
</>
);
}
}
RegisterPage.propTypes = {
errors: PropTypes.object.isRequired,};
const mapStateToProps = (state) => ({
errors: state.errors,});
export default connect(mapStateToProps,{ registeruser })(
withRouter(RegisterPage)
);
#NOTE:我只显示了与错误管理相关的代码。
相同的逻辑适用于所有组件。
有时,我想在请求成功时显示文本,而不必执行上述操作:
history.push("/login-page");
我想知道的是:
创建一个类似于错误减少器的成功减少器是否有意义,当任何 http 请求在 React 组件中成功时,我可以使用它来集中要执行的逻辑并相应地显示一条消息。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。