Я хотел бы использовать REST-вызовы api, но притворяясь обновлением в начале действия reducex, ничего не делая, кроме, возможно, добавляя правильный идентификатор к вашему объекту при успешном завершении и возвращая состояние только с ошибкой.
Ваш редуктор вроде бы выглядел бы так, как если бы делался элемент:
export default (state = {}, action) => {
switch (action.type) {
case ActionsTypes.CREATE_START:
// make the temporary changes
case ActionsTypes.CREATE_SUCCESS:
// update the previous temporary id with a proper id
case ActionsTypes.CREATE_FAILURE:
// delete the temporary changes
default:
return state;
}
};
И ваши действия:
const ActionLoading = item => ({
type: ActionsTypes.CREATE_START,
item,
});
const ActionSuccess = item => ({
type: ActionsTypes.CREATE_SUCCESS,
item ,
createdItem,
});
const ActionFailure = item => ({
type: ActionsTypes.CREATE_FAILURE,
item,
});
export default todo => (dispatch) => {
dispatch(ActionLoading(item)); // add the item to your state
const updatedTodo = await TodoClient.create(todo)
if (updatedTodo) {
dispatch(ActionSuccess(item, createdItem)) // update the temp item with a real id
} else {
dispatch(ActionFailure(item)) // remove the temporary item
}
};
Обязательно указывать временные идентификаторы для данных, которые вы управляете, ради выполнения и позволять соответствующим образом реагировать на элементы, отображаемые на картах. Я лично использую уникальный lodashId .
Вам также придется реализовать это поведение для обновлений и удаления, но это в основном то же самое:
- сохраните изменения, обновите свой объект, не дожидаясь api и верните изменения при сбое.
- удалите свой объект, не дожидаясь появления api, и вытащите его обратно при сбое.
Это даст ощущение реального времени, так как все будет обновляться мгновенно и только вернется к неуправляемым ошибкам. Если вы достаточно доверяете своему бэкэнду, это путь.
EDIT: просто увидели ваше обновление, вы можете придерживаться этого способа мутации данных (или обычного способа обновления состояния при успехе), но чтобы избежать слишком большой сложности и времени рендеринга, убедитесь, что вы храните свои данные с помощью keyBy . Как только ваши объекты будут сохранены в виде массива объектов с ключом по их идентификатору, вы сможете добавлять, удалять и изменять их с помощью сложности O (1). Кроме того, реакция будет понимать, что не нужно повторно отображать весь список, а только один обновленный элемент.