Должны ли действия иметь несколько отправок или вызываться отдельно? ReactJs + Redux

0

Скажем, у меня есть кнопка, которая "добавляет" элемент. Запрос ajax будет сделан, если все будет хорошо, элемент будет добавлен на страницу, и будет показано сообщение об успешном завершении.

будет происходить 2 события отправки

Create
Notification

Но что должно быть огнем этих событий?

Скажем, у меня есть этот метод в моем компоненте, который запускается onClick

  validate() {
        if (this.state.storageName === "" && this.state.sharingKey == "") {
            console.log("validation error");
            return false;
        }

        this.props.createNewStorage(this.state);
        this.props.setNotifer(true);
    }

Прямо сейчас CreateNewStorage выглядит так

export function createNewStorage(storage) {
    return function (dispatch) {
        dispatch({ type: actions.NEW_STORAGE_CREATED, payload: storage });
    };
}

setNotifer

export function setNotifer(success) {
    return function (dispatch) {
        dispatch({ type: actions.SET_NOTIFIER, payload: success });
        setTimeout(() => dispatch({ type: actions.CLOSE_NOTIFIER }), 1000);
    };
}

То, что у меня есть прямо сейчас (вызов CreatenewStorage и setNotifier), будет работать, но когда я на самом деле выполняю запрос ajax, вызвав их таким образом, это не будет работать, поскольку CreateNewStorage может потребоваться некоторое время, чтобы вернуть успех, в то время как setNotifier уже был бы запущен.

Итак, это приводит меня к тому, где я делаю несколько рассылок?

Способ 1

export function createNewStorage(storage) {
    return function (dispatch) {
        dispatch({ type: actions.NEW_STORAGE_CREATED, payload: storage });
dispatch({ type: actions.SET_NOTIFIER, payload: success });
        setTimeout(() => dispatch({ type: actions.CLOSE_NOTIFIER }), 1000);
    };

Путь 2

   export function createNewStorage(storage) {
        return function (dispatch) {
            dispatch({ type: actions.NEW_STORAGE_CREATED, payload: storage });
           setNotifer(true);
        };
    }

оба эти способа, конечно, были бы обернуты вокруг какого-либо метода ajax и будут добавлены в успешную часть.

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

Теги:

1 ответ

0

Прекрасно отправлять два события в один и тот же вызов. Вы используете промежуточное ПО thunk, кажется, что это можно сделать легко, но для тех, кто не существует, Redux-Multi. Тем не менее, я бы по-прежнему предпочитал отправлять их отдельно, потому что:

  1. Его легче определить, откуда появилось уведомление, для кого-то, кто может работать с вашим кодом.
  2. Вы можете программно управлять (задержка, смещение или сопряжение с некоторыми другими действиями и т.д.) Уведомление, если вызов выполняется отдельно. Вы никогда не знаете, как вам нужно его модифицировать. Да, вы можете сделать в каком-то месте, а не в других, но было бы лучше оставаться последовательным (пункт 1).

Однако вы можете сделать свой createNewStorage thenable и направить в другое событие после его успеха (позволяет сказать, что вы делаете некоторые обновления БД и он не так что вы не хотите, чтобы пользователь, чтобы увидеть уведомления успеха заранее).

В ваших действиях:

  export function createNewStorage(success) {
    return function (dispatch) {
      return new Promise(function(resolve, reject) {
        if (somecondition === true) {
          dispatch({ type: actions.SET_NOTIFIER, payload: success });
          resolve('it works!');
        } else {
          reject(':(');
        }
      });
    };
  }

И в вашем компоненте:

createNewStorage()
  .then(function() {
    ... launch the other action ...
  })
  .catch(function() {
    ... it failed :( ...
  });
  • 0
    Да, я использую промежуточное программное обеспечение Thunk, но я все еще новичок в этом и не знаю на 100%, что это такое. Я читал об этом. Не могли бы вы привести несколько примеров? Разве оба способа, которые я сделал, не сделали бы 2 вызова отправки? Это в значительной степени одно и то же, но способ 2 вызывает другой файл action.js с setNotifer (хотя теперь я понимаю, что мне нужно обернуть его в диспетчере, поскольку, как и в случае 2, ничего не делает)
  • 0
    ах, извините, я редактировал сам вопрос (новый здесь)! такой тупой :( Пожалуйста, посмотрите на мой отредактированный ответ.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню