Как показать сообщение после отправки Redux

87
8

Когда нажимается кнопка, я вызываю следующее:

this.props.dispatch(addNote(this.state.noteContent))

Это, в свою очередь, вызывает следующее действие:

export default function addNote(note){
return dispatch => {
axios.post('http://localhost:2403/notes', {
Body: note
})
.then(function (response) {
dispatch({
type: ADD_NOTE,
payload: response.data
})
})
.catch(function (error) {
console.log(error)
})
}
}

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

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

Как мне это достичь?

спросил(а) 2021-01-19T10:33:41+03:00 2 месяца, 3 недели назад
1
Решение
87

Вы можете использовать компонент тоста (например, https://www.npmjs.com/package/react-toastify), который находится поверх ваших маршрутов в вашем приложении, которое отображает каждый раз, когда вызывается действие в редуксе.


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

ответил(а) 2021-01-19T10:33:41+03:00 2 месяца, 3 недели назад
44

Вы можете вернуть обещание от своей отправки с помощью redux-thunk, почему бы не использовать это? Попробуйте этот код в вашем thunk:

export default function addNote(note){
return dispatch => {
return axios.post('http://localhost:2403/notes', {
Body: note
})
... //function continues

Тогда вы можете сделать:

this.props.dispatch(addNote(this.state.noteContent)).then(successFunc, failureFunc);

successFunc = function() {
//Show message on UI
}

ответил(а) 2021-01-19T10:33:41+03:00 2 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема