Назначение Redux Thunk `([arg (s)]) =› dispatch = ›`?

Приведенный ниже код взят из курса Udemy по стеку MERN Брэда Трэверси. Я новичок в Redux и Redux Thunk и пытаюсь понять, какова цель => dispatch =>. Я знаю, что он исходит от Redux Thunk, который был настроен в файле хранилища Redux. Я думаю, что dispatch используется здесь для отправки более одного действия из этой функции, и я прочитал, что синтаксис = ([arg(s)]) => dispatch => является примером каррирования (хотя это не кажется правильным, поскольку при каррировании каждая функция имеет один аргумент).

Буду очень признателен за любую помощь в понимании => dispatch =>.

(Другая небольшая путаница: в процессе функция setAlert называется действием, но я не уверен, что это правильно, поскольку она содержит несколько отправок действий.)

export const setAlert = (msg, alertType, timeout = 5000) => dispatch => {
  const id = uuidv4();
  dispatch({
    type: SET_ALERT,
    payload: { msg, alertType, id }
  });

  setTimeout(() => dispatch({ type: REMOVE_ALERT, payload: id }), timeout);
};

reactjs redux redux-thunk
person nCardot    schedule 26.12.2019    source источник

Ответы (3)


arrow_upward
4
arrow_downward

Здесь происходит пара вещей:

1) setAlert - это то, что обычно называют «создателем действия». Это функция, которая возвращает действие, которое вы можете отправить позже.

2) Redux-Thunk позволяет вам использовать функции формы (dispatch) => {} в качестве действий (вместо более нормальной формы объекта { type, payload })

Может помочь, если вы посмотрите на них по отдельности, прежде чем увидеть, как они сочетаются вместе:

// This is an action creator (a function that returns an action)
// This doesn't use redux thunk, the action is just a simple object.
// Because it's an action creator you can pass in arguments
// Because it's not a thunk you can't control when then dispatch happens
const setAlertActionCreator = (msg, alertType) => {
  const id = uuidv4();
  return {
    type: SET_ALERT,
    payload: { msg, alertType, id }
  };
};

// You use this as:
dispatch(setAlertActionCreator("msg", "type"));


// This is not an action creator it's just an action.
// This IS a redux-thunk action (it's a (dispatch) => {} function not a simple object)
// Because it's not an action creator you can't pass in arguments to get a custom action back
// Because it IS a redux-thunk action you can dispatch more actions later
const setAlertThunk = (dispatch) => {
  setTimeout(() => dispatch({
    type: SET_ALERT,
    payload: {
      message: "fixed message",
      alertType: "fixed alertType",
      id: "fixed id",
    }
  }), 5000);
};

// You use this as:
dispatch(setAlertThunk);


// When you combine both patterns you gain the ability
// to both pass in arguments and to create additional dispatches
// as the function runs (in this case dispatching again after a timeout.)
// I won't repeat your code, but will show how you would call it:

dispatch(setAlertActionCreator("msg", "type"));

// ie: you use it the same way as example 1.
person david    schedule 26.12.2019
comment
Спасибо - используется ли Redux Thunk в обоих отдельных (отдельно взятых) примерах? Похоже, что он используется во втором, поскольку он имеет = (dispatch) =>, но поскольку он не показан в первом, я не уверен. - person nCardot; 26.12.2019
comment
@Natalie Redux Thunk используется только во втором примере. Я обновлю комментарии, чтобы прояснить это. Первый пример - это просто создатель действия, второй пример - просто действие преобразователя redux. Ваш пример - создатель действия redux thunk. - person david; 27.12.2019

arrow_upward
3
arrow_downward

Синтаксис () => dispatch => эквивалентен:

function response(){
    return function (dispatch){
       //Some code here
    }
}

Итак, в основном вы можете сказать, что это современный способ написания одной и той же функции. => dispatch => возвращает функцию, которая будет выполнена при вызове action.

Надеюсь, это поможет.

person Muhammad Zeeshan    schedule 26.12.2019
comment
Вы уверены? Я думал, что dispatch в => dispatch => был аргументом, а не именем функции. - person felipe; 26.12.2019
comment
Как вы думаете, это функция, а не аргумент? Я нашел страницу, на которой говорится, что Redux Thunk - это промежуточное программное обеспечение, которое позволяет вам вызывать создателей действий, которые возвращают функцию вместо объекта действия. Эта функция получает метод диспетчеризации хранилища, который затем используется для отправки регулярных синхронных действий внутри тела функции после завершения асинхронных операций. alligator.io/redux/redux-thunk - person nCardot; 26.12.2019
comment
Кроме того, другой источник сообщает, что Redux будет передавать два аргумента функциям преобразования: диспетчеризация, чтобы они могли отправлять новые действия, если они в этом нуждаются; и getState, чтобы они могли получить доступ к текущему состоянию. daveceddia.com/what-is-a-thunk - person nCardot; 26.12.2019
comment
Ага, это неправильно. в () => dispatch => отправке - аргумент, а не имя функции. - person david; 27.12.2019
comment
@david, я согласен с вами. Спасибо за исправление. - person Muhammad Zeeshan; 27.12.2019

arrow_upward
0
arrow_downward 

=> dispatch =>

это не что иное, как синтаксический сахар над функцией, возвращающей другую функцию. Так как функции жирной стрелки => используются вместо обычных функций.

Нравиться

function abc(a,b){
return a+b;
}

такое же, как const abc = (a,b) => a+b ;

Таким образом, вам не нужно писать ключевое слово return.

Итак, в вашем случае это тот же => dispatch => и тот, который ниже, он возвращает анонимную функцию с. dispatch в качестве аргумента

function response(){
    return (dispatch){
       //some code here
    }
}

Надеюсь, это поможет, не стесняйтесь сомневаться

person Gaurav Roy    schedule 26.12.2019