Обработайте оптимистичные обновления в Redux Toolkit ⇐ Javascript

[Anonymous]

Я хочу обновить свой пользовательский интерфейс оптимистично до возврата ответа (из Firebase в моем случае), и если запрос не удастся, я должен вернуть пользовательский интерфейс к тому, что было до оптимистичного обновления, по сути.

Код: Выделить всё

const initialState = {
dbItems: [],
items: [],
};
< /code>
и в асинхронизации я делаю что -то вроде этого: < /p>
export const updateItem = createAsyncThunk(`${ REDUCERS.TASKS }/updateItem`, async (
data,
{
dispatch,
getState,
rejectWithValue,
requestId
}
) => {
// Optimistic update, this is where I mutate the items state, nothing fancy happening in this reducer
dispatch(optimisticUpdate(data));

try {
const updatedTask = await myRequest(data);

return updatedTask;
} catch (error) {
const { dbItems } = getState().items;
// Not sure if I actually need requestId here since it's not stored somewhere.
const itemId = data.id ?? requestId;

// Revert to previous task if db update fails
const originalItem = dbItems.find(({ id }) => id === itemId);
return rejectWithValue(error, { originalItem });
}
});

Это пользовательский экстракрат, когда myRequest () отклоняет:

Код: Выделить всё

.addCase(updateItem.rejected, (state, { meta }) => {
// Not sure if I actually need requestId here either.
const itemId = meta.arg.id ?? meta.requestId;
const itemIndex = state.tasks.findIndex(({ id }) => id === itemId);

if (itemIndex < 0) {
return;
}

const { originalItem } = meta;

if (originalItem) {
state.tasks[ itemIndex ] = originalItem;
} else {
state.tasks.splice(itemIndex, 1);
}
})
< /code>
Проблема в том, что я должен хранить два отдельных состояния (dbItems

и элементы ), которые делают почти одно и то же, и я должен убедиться, что я обновляю их оба, когда должно быть общее обновление. Есть ли другой способ сделать это?

Подробнее здесь: https://stackoverflow.com/questions/794 ... ux-toolkit