Am I using Redux correctly?

Question

this is just a question, I'd love to double check if I'm doing things right. I'm coming from ages of different frameworks, and I def want to avoid bad practices in the early stage.

I'm using this boilerplate: https://github.com/erikras/react-redux-universal-hot-example and I'm writing in ES7.

I created: - 1 reducer: earlyUser.js - 1 container: landingPage.js - 1 component: registrationForm.js

In the landingPage, I'm including the methods from reducer in this way:

import { saveEmail, savePreferences, checkEmailExists } from 'redux/modules/earlyUser';

and I declare some handles

 handleSubmitEmail(data) {
    this.props.saveEmail(data);
 }

 handleSubmitPreferences(data) {
    //some data manipulation
    this.props.savePreferences(data);
 }

and in the JSX part I just pass to my component the handlers:

<registrationForm submitEmail= {::this.handleSubmit}   etc... >

Now inside the component, I linked the form submission to this handler:

submitEmail() {
    if (this.validateEmail(this.state.email)) {
      this.props.submitEmailHandler(this.state);
    }
  }

Now my question is, where should I attach the .then and .catch of the promise returned ? Ideally I'd like to do inside the component.js something like

this.props.submitEmailHandler(this.state).then( function emailRegisterCallback(){
   // move to next step
}).catch( function errorHandler(error){
  // there was an error
}

Is that correct?

Also, is there the right syntax to handle promises in ES7 ?

Answer 1

You normally handle the async aspects in your action creators:

See this code from the async redux example:

function fetchPosts(reddit) {
  return dispatch => {
    dispatch(requestPosts(reddit));
    return fetch(`http://www.reddit.com/r/${reddit}.json`)
      .then(response => response.json())
      .then(json => dispatch(receivePosts(reddit, json)));
  };
}

When the promise resolves, you should dispatch another action to update the state with the successful result or the error.