CODEWITHSUNDEEP
javascriptreactjsecmascript-6redux
Jenny Mok
Jenny Mok

Reputation: 2804

Using redux best practice with promises

export function postRegister(credentials) {
    console.log(credentials);

    return dispatch => {
        return fetch('/user/register', {
            method: 'post',

            body: JSON.stringify(credentials),

            headers: {
                'Content-Type': 'application/json'
            }
        })
            .then(response => response.json())
    }
}

I have few doubts regarding code above.

  1. Can I use export () => {} instead of writing the word function here? Just to stay cleaner.

  2. dispatch is a global variable? I did not see it's imported or required somewhere in the file.

  3. Is specifying headers necessary here? I'm seeing that in every of the api call.

  4. Why there's no catch in this promise call? Overall the code is bad?

Upvotes: 2

Views: 171

Answers (2)

Crysfel
Crysfel

Reputation: 8158

  1. No really, you could but you need a name to actually use it in your components.
  2. No, dispatch is a parameter of the arrow function, you can also define getState to access the current redux state. By the way, you can totally assign new names if you want.
  3. It depends on your server, but generally if you are using a JSON API, you would want to send that header.
  4. Yes, overall that code doesn't look good, I would recommend using a middleware to handle the fetch requests, your actions should only send the configurations such as the url, body, method, etc... and your middleware should handle adding common headers (such as the content-type).

You could have an action like this:

export function postRegister(credentials) {
  return {
    types: [REGISTER, REGISTER_SUCCESS, REGISTER_FAIL],
    promise: {
      url: '/user/register',
      data: credentials,
    },
  };
}

Something as simple as that, then your middleware should do the fetch and dispatch the action types based on the server response.

If you want to know more about how the middleware should handle the fetch request and dispatch the actions, make sure to take a look at my post here: https://stackoverflow.com/a/39971763/146718

Upvotes: 1

jony89
jony89

Reputation: 5367

  1. not unless it is export default. since later u will need to import it by name.

  2. no, dispatch is an argument that is passed to your function:

    (dispatch) => {}

  3. Totally depends on your application, server, request, etc.

  4. you could add .catch((e) => {}) your self, or use some interceptors for generic errors, do a dipatch from there and add a reducer which will handle these actions. you could read more here:

What is the best way to deal with a fetch error in react redux?

Upvotes: 0

Related Questions