Чем отличается обещание от asyn c, когда я использую redux-thunk? - PullRequest
Новая
       78

Чем отличается обещание от asyn c, когда я использую redux-thunk?

0 голосов
/ 06 августа 2020

Привет, я немного запутался, как работает redux thunk ... например,

этот код работает

code1 

export const getAllUsers = () => (dispatch) => {
  axios
    .get("https://reqres.in/api/users?page=2")
    .then((res) => {
      console.log(res);
      dispatch({ type: GET_ALL_USER, payload: res.data.data });
    })
    .catch((e) => console.log(e));
};

но этот код не работает ...

code2 

export const fetchComments = () => () => {
  axios
    .get("https://jsonplaceholder.typicode.com/posts/1/comments")
    .then((res) => {
      return {
        type: FETCH_COMMENTS,
        payload: res.data,
      };
    });
};

но этот код работает ..

code3 

 export const fetchComments = async() => {
     let res = await axios.get("https://jsonplaceholder.typicode.com/posts/1/comments")
     return {
         type: FETCH_COMMENTS,
         payload:res.data
       }
   ;
 };

поэтому мне действительно интересно, почему code2 не работает и почему работает code3.

1 Ответ

2 голосов
/ 06 августа 2020

Почему работает Код №1? - Диспетчеризация

Эта функция вызывает диспетчеризацию, дающую информацию о том, что делать дальше, с помощью redux-thunk 

export const getAllUsers = () => (dispatch) => {
  axios
    .get("https://reqres.in/api/users?page=2")
    .then((res) => {
      console.log(res);
      dispatch({ type: GET_ALL_USER, payload: res.data.data }); // Calling a dispatch, which is a clear trigger for the middleware
    })
    .catch((e) => console.log(e));
};

Почему не работает Код # 2 1006 * Вы не можете вызвать await fetchComments здесь, потому что вы никогда не определяли fetchComments как asyn c, поэтому redux-thunk не получает то, что вы ожидаете получить export const fetchComments = () => () => { // This is a plain function, noy an asynchronous one, meaning that the middlware won't get the result it is expecting axios .get("https://jsonplaceholder.typicode.com/posts/1/comments") .then((res) => { return { type: FETCH_COMMENTS, payload: res.data, }; }); }; Почему работает Code # 3 - более высокая область видимости - asyn c

Это можно назвать await fetchComments, потому что вы определили его в async () => ..., таким образом, redux-thunk понимает это 

 export const fetchComments = async() => { // Clearly defined to be async
     let res = await axios.get("https://jsonplaceholder.typicode.com/posts/1/comments")
     return {
         type: FETCH_COMMENTS,
         payload:res.data
       }
   ;
 };

Итак, чтобы ответить на ваш вопрос, В чем разница между обещанием и asyn c при использовании redux-thunk?

getAllUsers() => это сработает dispatch({...}) после завершения Promise, и именно поэтому он работает - ничего особенного делать с Promise vs Asyn c

fetchComments() => Это вернет простую функцию, возвращающую объект, после Обещание выполнено, что-то, что не подходит для redux-thunk

async fetchComments() => Это можно правильно обработать с ожиданием для получения готового результата (объекта), как в функции выше, но с ним можно справиться, потому что это asyn c.

Итак, проблема не в Promise vs Asyn c, это как вы вызываете функции и определяете их, вы можете достичь как с помощью Promise, так и с помощью Asyn c

...