Redux-thunk или промежуточное ПО?

У меня несколько action, после чего я должен вызвать еще двум action.

Мой первый подход - написать middleware, который выглядит так:

some-middleware.js

const actions = {
  [POST_CATEGORIES_SUCCESS]: 1,
  [SET_READING_TIME_SUCCESS]: 1
}

export default store => next => action => {

  // console.info("calling auth middleware", action)

  // Reset any session data before SIGNUP or LOGIN request
  if (actions[action.type] === 1) {
    store.dispatch(resetStories())
    store.dispatch(getStories())
  }


  return next(action)

}

Другой подход - поставить

    store.dispatch(resetStories())
    store.dispatch(getStories())

внутри два redux-thunk вроде

export const postCategories = (categories) => (dispatch) => {
  dispatch(fetchPostCategories(categories))
  store.dispatch(resetStories())
  store.dispatch(getStories())
}

export const setReadingTime = (readingTime) => (dispatch) => {
  dispatch(fetchReadingTime(readingTime))
  store.dispatch(resetStories())
  store.dispatch(getStories())
}

Это означает, что код будет повторяться каждый раз, когда мне нужно отправить эти два действия.

Я что-то упустил во всем этом? Правильный ли подход к промежуточному программному обеспечению?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
112
1

Ответы 1

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

export const baseDispatch = (action) => (dispatch) => {
  dispatch(action)
  dispatch(resetStories())
  dispatch(getStories())
}

export const postCategories = (categories) => (dispatch) => {
  dispatch(baseDispatch(fetchPostCategories(categories)));
}

Другие вопросы по теме