Handling Transactional Emails In React Redux Apps

rajaraodv
rajaraodv
Mar 22, 2016 · 6 min read

Scenario: User has signed up to our app with an email and we need to verify that email.

Scenario 1 — User Registers And Then Gets An Email:

Scenario 2 — Resend Email

Scenario 3 — Update Email

So, where do you start?

1. Alert Component — ValidateEmailAlert Component

The component looks like:

<ValidateEmailAlertContainer token={someToken} autoValidateToken={true}/>

ValidateEmailAlert — List Of States:

State — user:

//validate email, if success, then load user and login
export const VALIDATE_EMAIL = ‘VALIDATE_EMAIL’;
export const VALIDATE_EMAIL_SUCCESS = ‘VALIDATE_EMAIL_SUCCESS’;
export const VALIDATE_EMAIL_FAILURE = ‘VALIDATE_EMAIL_FAILURE’;

State — resendEmail:

State — autoValidateToken

State — token

ValidateEmailAlert — List Of Actions:

//validate email, if success, then load user and login
export const VALIDATE_EMAIL = ‘VALIDATE_EMAIL’;
export const VALIDATE_EMAIL_SUCCESS = ‘VALIDATE_EMAIL_SUCCESS’;
export const VALIDATE_EMAIL_FAILURE = ‘VALIDATE_EMAIL_FAILURE’;

ValidateEmailAlertContainer Component:

//ValidateEmailAlertContainer component
const mapDispatchToProps = (dispatch, ownProps) => {
return {
validateEmail: () => {
dispatch(validateEmail(ownProps.token)).then((response) => {
if(!response.error) {
sessionStorage.setItem(‘jwtToken’, response.payload.token);
dispatch(validateEmailSuccess(response.payload))
} else {
sessionStorage.removeItem(‘jwtToken’);
dispatch(validateEmailFailure(response.payload));
}
});
},

resend: () => {
let jwtToken = sessionStorage.getItem(‘jwtToken’);
if (!jwtToken || jwtToken === ‘’) {
alert(‘Please Log In’);
return;
}
dispatch(resendValidationEmail(jwtToken))
.then((response) => {
!response.error ?
dispatch(resendValidationEmailSuccess(response.payload)) :
dispatch(resendValidationEmailFailure(response.payload));
});
},

resetMe: () => {
dispatch(resetResendEmailState());
}
}

ValidateEmailAlert — Automatically Validating Token

componentDidMount() {
//automatically verify for token if autoValidateToken
//is set to true (e.g. in ValidateEmail *page*)
if(this.props.autoValidateToken) {
this.props.validateEmail(this.props.token);
}
}

Implement ValidateEmail Landing Page

class ValidateEmail extends Component {
render() {
return (
<div>
<HeaderContainer type=”posts_new”/>
<ValidateEmailAlertContainer
token={this.props.params.token} <-- pass token from router
autoValidateToken={true} <-- pass this "true"
/>
</div>
);
}
}
export default ValidateEmail;

Implement Profile Page For Update Email

My Other Blogs

ES6

WebPack

Draft.js

React And Redux :

Salesforce

rajaraodv

Written by

rajaraodv

Trying to make Web development simple. Former Developer Advocate @Salesforce, VMware (node.js); Engineer @ Yahoo, Zimbra. Twitter: @rajaraodv

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade