Why does redux thunk return promise?

Question

I am learning redux-thunk middleware as a beginner react developper, and I don't understand why dos the function (returned by redux-thunk) returns a promise (returned by fetch())

I tried not to return anything, and it worked, so why do we return it?

export function getCourses() {
  return fetch(baseUrl)
    .then(handleResponse)
    .catch(handleError);
}

export function loadCourses() {
  return function(dispatch) {
    dispatch(beginApiCall());// dispatch some synchronous action

    return courseApi
      .getCourses().then(courses => {
        dispatch(loadCourseSuccess(courses));
      }).catch(error => {throw error;});
  };
}

For the component named MyComponent dispatching loadCourses() action

function MyComponent(props){
    .......
    useEffect(() => {
        loadCourses()
    });

    const mapDispatchToProps = {
        loadCourses,
        .....
    }
}

what exact function do you mean? `loadCourses` or that nested anonymous `function(dispatch)`? — skyboyer, Aug 25 '19 at 11:16
Here's a very good example showing that (returning Promises) in action: https://github.com/reduxjs/redux/issues/1676 (see the first comment). — Mati, Jul 10 '20 at 20:07

score 2 · Answer 1 · answered Aug 25 '19 at 17:30

2

I think i got the answer(from a colleague).

if you want to chain certain activities, your action would need to return a Promise.

it's just a good way to allow chaining activities after the result is returned!

answered Aug 25 '19 at 17:30

Nada El Nokaly

81
1
7

score 1 · Answer 2 · edited Aug 25 '19 at 18:20

Well, first of all the function returns some data because you asked it to return some sort of result return function(dispatch) {...}. If you want to ignore the returned result just remove the return from return function(dispatch) {...}.

Secondly, the function returns a promise because of the way that you have written your call to API functions (wrapped inside promise and not returning callbacks upon function completion).

If you want to get the actual result of the API call you should use the Async / Await syntax.

score -1 · Answer 3 · answered Aug 25 '19 at 11:20

With a plain basic Redux store, you can only do simple synchronous updates by dispatching an action. Middleware extends the store's abilities and let you write async logic that interacts with the store.

Thunks are the recommended middleware for basic Redux side effects logic, including complex synchronous logic that needs access to the store, and simple async logic like AJAX requests.https://github.com/gaearon/redux-thunk

The thunk middleware knows how to turn thunk async actions into actions, so you just have to have your simple_action() to be a thunk and the thunk middleware will do the job for you, if the middleware see a normal action, he will dispatch this action as normal action but if it's an async function it will turn your async action into normal action.

You can also see return promise from store after redux thunk dispatch

I think the line `it will turn your async action into normal action` is a bit misleading. All the thunk MW does is call your thunk (a function) with `dispatch`, `getState` and optionally extra argument passed along, and returns what ever is returned from your thunk. — Mati, Jul 10 '20 at 20:12

Why does redux thunk return promise?

3 Answers3