В некоторых статьях некоторые люди говорят, что состояния пользовательского интерфейса, такие как isLoading
(уровень компонента), isSubmitting
, isFetching
и т. Д., Не должны находиться в глобальном хранилище состояний. Они должны храниться и поддерживаться в состоянии компонента.
Итак, я попытался выяснить, как обрабатывать такие типы состояний локально в компонентах. Я обнаружил, что мы можем использовать обещания или async / await для обработки (Ref: Использование Async / Await )
Например, вот как мы можем использовать Promises
и Redux-thunk
для обработки isSubmitting
В Действии Создатель:
export const addStudent = (payload) => {
return function (dispatch) {
return StudentService.add(payload).then(() => {
dispatch(addStudentSuccess());
dispatch(fetchStudents());
});
};
}
В Redux Connected Component, дождитесь завершения и переключите состояние isSubmitting
:
async onSubmit={(values) => {
setState({isSubmitting: true});
await this.props.addStudent(values);
setState({isSubmitting: false});
}}
Однако на странице Redux упоминается, что Redux является строгим однонаправленным потоком данных . Мне кажется, что Компоненты, ожидающие ответа от Создателей Действий, нарушают однонаправленный поток. Это становится двунаправленным потоком, как показано на следующей диаграмме (см. Красную стрелку):
Я хотел бы знать, разрешено ли это или хорошая практика для этого. Или я неправильно понял насчет однонаправленного потока данных?