#redux #redux-toolkit #react-tsx
Вопрос:
Я новичок в реагировании и работаю над функцией перетаскивания, и в этом случае мне нужно отправить запрос api на серверную часть на конце перетаскивания, а также мне нужно обновить состояние. Для достижения этой цели я использую redux-инструментарий createAsyncThunk .
При перетаскивании отправляется действие, в котором вызывается серверный api, а затем в хранилище redux extraReducres обновляется состояние внутри. Обновление состояния таким образом приводит к задержке обновления состояния и вызывает очень плохое взаимодействие с пользователем.
Обратитесь к изображению для поиска ошибок:
Пример кода:
// Component code const onDragEnd = () =gt; { //reordering logic dispatch(updateDragNDrop(newOrderObjArray)); } //Async Thunk Code export const updateDragNDrop = createAsyncThunk( "todoBlockSlice/updateStateAfterDragNDrop", async (sections: any) =gt; { let sectionsArr = [ sections.src, sections.dest] await axios.post("http://localhost:8080/updateDnd", sectionsArr); return sections; } ); // Extra Reducers Code builder.addCase(updateDragNDrop.fulfilled, (state, action) =gt; { let src: TodoSectionType = action.payload.src; let dest: TodoSectionType = action.payload.dest; let newSectionsState: TodoSectionType[] = state.sections.map( (sec: TodoSectionType) =gt; { if (sec.sectionType === src.sectionType) { let section: TodoSectionType = { ...src, }; return section; } else if (dest !== null amp;amp; sec.sectionType === dest.sectionType) { let section: TodoSectionType = { ...dest, }; return section; } return sec; } ); state.sections = newSectionsState; }); Комментарии:
1. Вы можете выполнить оптимистичное обновление и откат, если вызов api завершится неудачно. Оптимистичные обновления могут быть опасны, потому что, если пользователь покинул экран до сбоя вызова api, трудно уведомить пользователя о том, что что-то пошло не так. Вы также можете показать анимацию загрузки, отправив загрузку до вызова api и отправив сообщение об успехе/сбое после, но это даст вам менее отзывчивый пользовательский интерфейс (все равно лучше, чем задержка).
2. @HMR по причинам, о которых вы упомянули, я не готов использовать такой подход
3. @Shail Если вы хотите немедленно обновить пользовательский интерфейс, чтобы он был быстрым и отзывчивым, И сохранить изменения в бэкэнде, к сожалению, оптимистичное обновление-единственный способ. Проблема, связанная с тем, что пользователь уходит с этого экрана и не знает, что его действие перетаскивания не может быть сохранено в бэкэнде, обычно решается с помощью какого-либо глобального компонента уведомлений/тостов, который может появляться в любом месте и информировать пользователя о проблеме.