Struggling to understand Redux-Thunk actions

JavaScript
1

Hello!
I am new to async actions in general, but I need to implement them for a react-redux project. To practice redux-thunk, I have been playing with the this code someone posted: [https://codepen.io/sh1zuku/pen/XBrQVr?editors=0010](simple React Redux Thunk example)

On line 69 in the addValueLazy function, I changed the code to:

const addValueLazy = (dispatch, getState) => {
  return dispatch => {
    setTimeout(()=>dispatch(addValue()), 300).then(window.alert("added!"));
  }  
}

The .then() code does not wait for the setTimeout function to end before it does the window alert–in fact it runs the window.alert right away.

Additionally, when I attempt with async/await, it doesn’t work either. This is my async/await code:

const addValueLazy = (dispatch, getState) => {
  return async dispatch => {
    await setTimeout(()=>dispatch(addValue()), 300));
    window.alert("added!");
  }
}

Same thing, it does the window alert right away before the number changes. What am I doing wrong? Am I missing something here?

Thank you in advance.

2 
const addValueLazy = (dispatch, getState) => {
  return dispatch => {
    setTimeout(()=>dispatch(addValue()), 300).then(window.alert("added!"));
  }  
}

First, I didn’t think that setTimeout returns a promise. Second all, if it did, then you would need to wrap that second part in an anonymous function:

... .then(() => window.alert("added!"));

otherwise it is just going to evaluate that function. You always pass a function. As you have it, it is evaluating that call and “thenning” the return value, in other words, undefined.

const addValueLazy = (dispatch, getState) => {
  return async dispatch => {
    await setTimeout(()=>dispatch(addValue()), 300));
    window.alert("added!");
  }
}

The await (afaik) is only waiting for the setTimeout, in other words, the “setting” - it is not waiting for the callback function. If you want your alert to wait, it needs to be in the callback function being passed to setTimeout.

3

Right, setTimeout does not return a promise - at least it is throwing an error for me. You could build a promise wrapped version with something like this:

const setTimeoutPromise = (callback, delay) =>
  new Promise(resolve => setTimeout(() => resolve(callback()), delay));

console.log("before the promise");

setTimeoutPromise(() => console.log("callback function"), 3000)
  .then(() => console.log("then function"));

console.log("after the promise");

The output is this:

before the promise
after the promise
callback function
then function

The first two lines come instantly, the second two after the 3 second delay, exactly what we are expecting.

4

Thank you so much! My question now is, why is resolve entered twice in the second line? I’m trying to understand the meaning behind the syntax here.
This is what you tested:

new Promise(resolve => setTimeout(() => resolve(callback()), delay));

Is there a reason it wouldn’t be this?:

new Promise(resolve => setTimeout((dispatch) => dispatch(callback()), delay));

…oh! I guess it because resolve was only passed as a parameter and so it needs to be called later and will perform (callback()) when it resolves.

5

…oh! I guess it because resolve was only passed as a parameter and so it needs to be called later and will perform (callback()) when it resolves.

Yup , you got it.

1 Like
6

Thanks a ton! Have a lovely day.

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.