Как поставить 2 redux thunk на разные редюсеры?

Question

[Николай Антонов]

Имеется несколько редюсеров, которые обьединяются в 1 с помощью combineReducers. Как поставить thunk мидлверы только на 2 из них по отдельности? В store в методе applyMiddleware можно добавить мидлвер на все подряд. А как разделить логику обработки?

Answer 1

[Максим]

Не совсем понял ваш вопрос, но thunk middleware никак не влияет на редьюсер.

Redux-thunk - это всего лишь вспомогательная функция для ваших экшен-крейтеров (или просто экшенов, как удобнее). Если посмотреть на исходный код, то можно описать его так: если AC (экшен, экшен крейтор, создатель действия...) возвращает простой объект - прокидывай его дальше, если возвращает функцию, то "прокинь" в эту функцию dispatch и getState функции в качестве аргументов. Например, это дает нам возможность работать с асинхронными запросами. Так как, чтобы достучаться до reducer'a мы же должны использовать функцию dispatch. А если бы не было redux-thunk, то откуда бы она взялась у нас в коде экшена: импорта в файл нет, нигде не описано, что const dispatch = ...?

Приведу пример:

export function logout {
  return {
    type: LOGOUT_SUCCESS,
  }
}

AC возвращает простой объект, который (если нет других middleware влияющих на работу) - сразу попадает в reducer.

export function login(data) {
  return dispatch => {
    dispatch({ type: LOGIN_REQUEST })

    return request.post(`${API_ROOT_V1}/auth/signin`)
      .send(data)
      .then(res => {
        if (!res.ok) {
          dispatch({ type: LOGIN_FAILURE })
          dispatch(showNotification({
            status: 'err',
            text: 'something going wrong',
          }))

        } else {
          dispatch({
            type: LOGIN_SUCCESS,
            data: res.body.data,
          })
          localStorage.setItem('cks_token', res.body.data)
          dispatch(push('/'))
        }
      }, err => {
        dispatch({ type: LOGIN_FAILURE })
        dispatch(showNotification({
          status: 'err',
          text: err.body && err.body.error || err.message,
        }))
      })
  }
}

Особое внимание на return dispatch => { - это значит, что АС возвращает функцию, а следовательно в этой функции из-за redux-thunk доступен dispatch. Если вводит в заблуждение ES2015 синтаксис, то это можно было бы написать как return function(dispatch) { ...

P.S. Опишите подробнее, что вы имеете в виду под "А как разделить логику обработки?"