Допустимо ли отправлять несколько раз в промежуточное программное обеспечение Redux?

Question

Я пытаюсь обернуть голову вокруг Redux или управления состоянием в целом для интерфейсных приложений.

Насколько я знаю, есть три базовых c библиотеки для создания сложных действий logi c: redux-thunk, redux-saga и redux-observable.

Я использую redux-thunk для создания цепочки асинхронных c операций, но я нашел их немного неуместными: Создатели действий должны создавать действия, а не функции.

Чтобы обойти это, я создал действия (создатели простых действий) и операции (thunks) с redux-toolkit, но я все еще вижу их немного сбивает с толку:

• редукторы. js (они также представляют действия):

export function add(state, action) { ... }
export function added(state, action) { ... }

• операции. js (они выполняют сложные действия logi c):

export function addItem(payload) {
  return async (dispatch) => {
    dispatch(actions.add(payload))

    const { data } = await Items.create(action.payload); 

    dispatch(actions.added(payload))
  }
}

Выглядит нормально, но я вижу себя пытающимся отправить add непосредственно в будущем.

---

Использование redux-saga кажется неестественным благодаря синтаксису генератора. Мне не нужно ничего говорить о redux-observable, это слишком сложно для этой простой задачи.

Поэтому я попытался использовать простое пользовательское промежуточное ПО для такой работы, но я не знаю, действительно ли это «хорошая практика» или «плохая практика». Однако он позволяет использовать простые действия для запуска наблюдателя, который отправляет функцию сопоставления:

• middlewares / обозреватель. js (упрощенно):

let listeners = {}

export const observer = store => next => action => {
  const result = next(action)

  if (action.type in listeners) {
    listeners[action.type](store.dispatch, action)
  }

  return result
}

export const createListener = (action, listener) => {
  listeners[action.type] = listener
}

Код выше позволяет писать «наблюдатели» / «слушатели», как показано ниже:

createListener(actions.add, async (dispatch, action) => {
  const { data } = await Items.create(action.payload)

  dispatch(actions.added(data))
})

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

Это плохой способ решить эту проблему?

Answer 1

Я поддерживаю Redux и создаю Redux Toolkit.

Существуют блоки, позволяющие перемещать сложные синхронные и полусложные асинхронные c logi c за пределы компонентов . Компоненты обычно используют создателей действий, чтобы не знать подробности того, как определить данный объект действия. Создатели Thunk Action существуют для обеспечения параллельного синтаксиса, позволяя компонентам запускать logi c без необходимости знать детали того, является ли это простым действием или чем-то более сложным.

Тем не менее, thunks делают не дает вам возможность реагировать на отправленные действия, потому что единственное, что делает промежуточное ПО thunk, - это проверяет, передали ли вы функцию thunk в dispatch, и если это так, вызывайте ее. Sagas и observables предоставляют API, которые позволяют запускать дополнительные logi c в ответ на отправленные действия. См. в разделе часто задаваемых вопросов Redux о том, «как выбрать между thunks, sagas и observables?» для получения более подробной информации.

Промежуточное программное обеспечение, которое вы только что показали, является типичным примером простое промежуточное программное обеспечение «слушателя действий» - действительно намного более простая версия того, что позволяют делать саги и наблюдаемые. На самом деле, мы надеемся добавить аналогичное промежуточное ПО в Redux Toolkit , но пока не сделали этого.

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