Закусочная Flutter Redux

Я использую redux в своем коде флаттера. У меня есть кнопка, которая при нажатии отправляет действие для вызова асинхронного API (в моем промежуточном программном обеспечении). Что я хочу сделать, так это когда вызов api выполняется и дает ответ, я хочу показать снэк-бар, указывающий, что это успешно обновленные данные или сообщение об ошибке. Моя проблема в том, как показать закусочную, отправив действие для ее отображения. Или есть лучший способ сделать это в redux?


person Vikas    schedule 17.04.2018    source источник
comment
Вы можете передавать обратные вызовы (завершенные и ошибочные) как часть действия, которое может использовать промежуточное ПО.   -  person aqwert    schedule 18.04.2018
comment
@aqwert Можете уточнить? Я этого не понимаю. Плюс моя проблема больше в том, как показать закусочную после ответа async api. Для значений я могу использовать appState, верно?   -  person Vikas    schedule 18.04.2018
comment
Добавил ответ   -  person aqwert    schedule 18.04.2018


Ответы (1)


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

Предполагая, что у вас есть хранилище Redux и вы используете асинхронный вызов API.

Виджет вашей страницы:

... 

_onSubmit(Store<MyState> store) {
   store.dispatch(new SubmitAction(onCompleted: _onCompleted, onError: _onError))

}

_onCompleted() {
    Scaffold.of(context).showSnackBar(new SnackBar(
       content: new Text("Item Completed")));

}

_onError(error) {
    Scaffold.of(context).showSnackBar(new SnackBar(
       content: new Text("Error Occurred")));
}

Ваше промежуточное ПО Redux:

apiMiddleware(Store<MyState> store, action, NextDispatcher next) {

    if(action is SubmitAction) {
        yourAPICall()
            .then((data) => action.onCompleted())
            .catchError((e) => action.onError(error));
    }

    next(action);
}

MyAction класс:

typedef void VoidCallback();
typedef void ErrorCallback(error);
class MyAction {
   MyAction({this.onCompleted, this.onError})

   VoidCallback onCompeleted;
   ErrorCallback onError;
}

Отчасти это можно сделать с помощью фьючерсов, но это достаточно просто.

person aqwert    schedule 17.04.2018
comment
Большое спасибо. Это подходило сработало. Другой способ, который я нашел, - это использовать глобальный ключ и использовать этот ключ в промежуточном программном обеспечении, чтобы отображать панель закусок после получения ответа от api. - person Vikas; 18.04.2018
comment
Конечно ... все, что работает, и вы довольны уровнем связи промежуточного программного обеспечения с пользовательским интерфейсом - person aqwert; 19.04.2018
comment
Что делать, если при нажатии кнопки «Отправить» я также отправляю действие загрузки. Это вызовет замену текущего виджета новым с отображением индикатора выполнения. Обратные вызовы останутся указывающими на уничтоженный контекст. Являются ли обратные вызовы безопасным механизмом для виджетов без сохранения состояния? - person kgiannakakis; 02.05.2018
comment
Зависит от контекста, который вы передаете. Если вы остаетесь на той же странице, вы можете передать контекст страниц, а не кнопку. - person aqwert; 03.05.2018
comment
Но нормально ли это с архитектурой, которую предлагает Redux? - person Gurleen Sethi; 21.07.2018
comment
@aqwert получает эту ошибку при показе закусочной при успешном вызове api - person s.j; 22.10.2020