Считается ли хорошей практикой передавать callBacks для уменьшения асинхронного действия?

Я хочу показать разные панели уведомлений об ошибках успеха/ошибок, Я передаю два callBacks для асинхронного действия reducex в моем реагирующем компоненте следующим образом:

<Button
  onClick={e => this.props.actions.asyncAction(item, this.showSuccessBar, this.showErrorBar)}
/>

где asyncAction выглядит следующим образом:

export function asyncAction(item, successCallback, errorCallback) {
  return (dispatch, getState) => {
    dispatch(requestItem(item));
    return fetch("api.some_url/items/item")
      .then(response => response.json())
      .then(json => {
        if (json.success) {
          dispatch(receivePostsSuccess(reddit, json));
          successCallback();
        } else {
          dispatch(receivePostsFail(reddit, json));
          errorCallback();
        }
      });
    }
  };
}

Рассматривается ли это против шаблона? другими словами, должны ли информационные панели открываться в соответствии с изменением состояния вместо callBacks?

Ответ 1

Узор сам по себе. Если это уведомление, локальное для компонента, не стесняйтесь подключать его через Redux.

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

this.props.dispatch(asyncAction(item)).then(onSuccess, onFailure);

Однако, если у вас много компонентов с такими столбцами уведомлений, лучше иметь редуктор, сохраняющий текущее уведомление и реагирующее на действия.

Ответ 2

Это будет двунаправленный поток данных, который нарушает первое правило потока.

Ответ 3

Я предлагаю разделить хранилище с именем smth, как NotificationStore, и создать вокруг него инфраструктуру уведомлений. Вы можете использовать обратные вызовы, но это путь к большим проблемам в будущем.