javascript - 如何使用 react-redux 概念在我的有效负载中显示我的引导模式？

Question

模态组件如下：

import React, { Component } from "react";
import { Link } from "react-router-dom";
class SingleProviderModal extends Component {
state = {};
render() {
return (
<section>
<div className="container">
<div className="row content-center">
<div className="modal fade" tabIndex="-1" role="dialog">
<div className="modal-dialog modal-dialog-centered cancel-modal" role="document">
<div className="modal-content">
<div className="modal-body">
<div className="">"Oops,Looks like you already signed up previously with another service 
provider using same Email Account"</div>
<div className="">"No Need to worry about your previous activity since we registered your 
email with your previous social provider"</div>
<div className="">"Try signing in using your previous social provider"</div>
<div className ="">
{/* <button type="button" className="btn btn-cancel text-center 
payment-cancel-back-btn" data-dismiss="modal">No</button> */}
<Link
to="/signin"
id="on"
className="btn btn-lg text-white text-center"
>
<span>Sign In</span>
</Link>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
);
}
}
export default SingleProviderModal;

我的 sessionAction.js 看起来像这样：

export const signup = (formProps) => (dispatch) => {
var encodedURI = window.encodeURI(`${API_URL}/signup`);
dispatch({ type: types.SIGNUP.REQUEST });
axios
.post(encodedURI, formProps)
.then((response) => {
setStorage("token", response.data.data.users.token);
setStorage("email", response.data.data.users.email);
dispatch({ type: types.SIGNUP.SUCCESS, payload: response.data });
// dispatch(push('/home'));
})
.catch((error) => {
dispatch({ type: types.SIGNUP.FAILURE, payload: {errorMessage: 'Server error. Please try 
again later'} })
// dispatch(push('/home'));
});
};

我的 sessionReducer.js 看起来像这样

const sessionReducer = (state = [], action) => {    
switch (action.type) {
case types.SIGNUP.SUCCESS:               
return {
...state,
token: action.payload.data.users.token,
user: action.payload.data.users,
meetingData: action.payload.data.meetingData,
isSignedUp: false,
signUpMessage: ''
};
case types.SIGNUP.FAILURE:
return {
...state,
isSignedUp: false,
signUpMessage: action.payload.errorMessage
};
case types.SIGNUP.REQUEST:
return {
...state,
  isSignedUp: true,
   signUpMessage: ''
   };
   }

触发 SIGNUP.FAILURE 场景时如何显示此模式组件？我想要的是当用户尝试使用相同的电子邮件 iD 通过 google 和 facebook 登录时显示一些错误，所以我在我的数据库本身中实现了这一点。但是，我不想显示错误消息，而是想显示一些向他们显示正确错误的模式，然后让他们使用相同的电子邮件 ID 与相同的提供商（他们之前注册的 Google 或 Facebook）登录以访问他们的帐户。

标签： javascriptreactjsreduxreact-reduxreact-router