Откуда берётся next и action в кастомных мидлварах redux?

Question

[KIberWarriorJs]

Всем привет ! Можешь кто нибудь обьяснить откуда берётся next и action в кастомных мидлварах в редакс ? Например я делаю свой мидлвар логгер

const logger = store => next => action => {
  console.group(action.type)
  console.info('dispatching', action)
  let result = next(action)
  console.log('next state', store.getState())
  console.groupEnd(action.type)
  return result
}

. Откуда он знает про next и action ? Можете пожалуйста обьяснить ? Забегая на перёд , доку прочитал , applyMiddleware исходники посмотрел , но всё равно не понятно . Нужно что бы кто нибудь обьяснил человеческим языком

Comments

[HealSpirit]

Ну здесь у нас замыкание. Где то вызывается logger (может и ты вызываешь). Это функция возвращает новую функцию. Ее так же кто вызывает, передавая next + через замыкание получаем доступ к store. Эта функция возвращает тоже функцию, которую где-то вызовут, передадут action + через замыкание доступно store и next

Answer 1

[Александр Талалаев]

Сама запись просто укороченный способ записать функцию которая возвращает функцию, которая возвращает функцию.

function logger(store) {
  return function wrapDispatchToAddLogging(next) {
    return function dispatchAndLog(action) {
      console.log('action', action)     
      console.log('next', next)
      console.log('store', store)
      return next
    }
  }
}

Легче читается так

const logger = store => next => action => {      
      console.log('action', action)     
      console.log('next', next)
      console.log('store', store)
      return next       
}

И вызвав logger(1)(2)(3); вы получете:

action 3
next 2
store 1

Далее, сама applyMiddleware уже умеет(с проверками и парочкой хитростей и ограничениями) прокидывать нужные параметры, запуская каждый middlware, на каждом этапе добавляя параметр.
Условный пример, не про реальность, а так чтобы понятно:

//Наш миддлвар
const logger = store => next => action => {      
      console.log('action', action)     
      console.log('next', next)
      console.log('store', store)
      return next       
}
//другой наш миддлвар
const logger2 = store => next => action => {      
      console.log('action2', action)     
      console.log('next2', next)
      console.log('store2', store)
      return next       
}

//Наша функция применялка, которая берет все миддлвары и будет с ними что-то мутить
function applyMiddleware(...middlewares) {
  const param1 = 1;
  const param2 = 2;
  const param3 = 3;
  const do1 = middlewares.map(middleware => middleware(param1))
  const do2 = do1.map(middleware => middleware(param2))
  const do3 = do2.map(middleware => middleware(param3))
 //Возвращаем условно 
 return 1
}

//Где-то в коде мы вызываем applyMiddleware
applyMiddleware(logger, logger2 )

//В консоле получим
//action 3
//next 2
//store 1
//action2 3
//next2 2
//store2 1

Comments

[KIberWarriorJs]

Спасибо ! Понятно !