Скажем, у меня есть кнопка, которая "добавляет" элемент. Запрос 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, чтобы вызвать другой метод действия друг от друга.
Прекрасно отправлять два события в один и тот же вызов. Вы используете промежуточное ПО thunk, кажется, что это можно сделать легко, но для тех, кто не существует, Redux-Multi. Тем не менее, я бы по-прежнему предпочитал отправлять их отдельно, потому что:
Однако вы можете сделать свой 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 :( ...
});