Что лучше стиль кодирования CRUD с помощью Redux?

Question

У меня есть простой вопрос о стиле кодирования для одностраничного приложения. Мой передний конец использует React Redux

Например, у меня есть стандартная страница CRUD, где данные отображаются в таблице и появляются модальные формы. Таблица данных фильтруется с сервера не от клиента.

Мой вопрос: Если я создаю, обновляю или удаляю данные, я должен вызвать функцию обновления или просто отредактировать ее в магазине redux?

функция Refresh:

1. Данные постоянно обновляются
2. Недавно добавленные данные фильтруются
3. Два раза запрос, медленнее, отвечать на запросы (основная проблема)

Redux магазин:

1. App выглядит отзывчивым
2. Один раз запрос
3. Проиграл сервер функции на стороне фильтра и данных не обновляется, если несколько пользователей использует приложение (основная проблема)

Любой совет будет оценивается

Answer 1

Отправка асинхронного действия, которое запрашивает сервер, на котором происходит фильтр, и когда он разрешает, обновляет состояние редукции с обновленными, отфильтрованными данными.

ПСЕВДОКОД

// dispatches an action to refresh data without page reload 
export function refreshDataAction() { 
    return (dispatch, getState) => { 

    return (
     fetch('api/data', options) // fetch the data from server and let it filter 
     .then(data => dispatch(updateDataAction(data))) 
    ); 
    }; 
} 

// dispatches an action to update redux state with filtered data 
export default function updateDataAction(data) { 
    return { 
    type: 'UPDATE_DATA', 
    ...data, 
    } 
} 

---

Тогда вы могли бы просто назватьdispatch(refreshDataAction()). Данные фильтруются, обновление не обновляется.

Answer 2

Редактировать магазин локально, чтобы дать немедленную обратную связь, а затем отправить запрос, и когда вы получите ответ обратно консолидировать магазин с новыми данными

в основном, делать обе вещи и получить максимальную пользу от обоих миров

Answer 3

Вызов обновления в приложении React (не только для React, но и для любого приложения в режиме реального времени) не соответствует целым принципам использования React.

Что вы должны делать, всякий раз, когда в вашем клиенте происходит операция изменения данных, вы должны вызвать вызов API, который соответствующим образом изменяет ваши данные на стороне сервера. Отправьте данные обратно клиенту (вы можете отправить его всем клиентам, если вы представляете себе веб-сокет), сохраните его в состоянии Redux, чтобы вызвать повторную визуализацию.