哪种使用 Redux 的 CRUD 编码风格更好？

Question

我有一个关于单页应用程序编码风格的简单问题。我的前端使用 React Redux

例如，我有一个标准的 CRUD 页面，其中数据以 table 显示并弹出模态形式。数据 table 是从服务器而非客户端过滤的。

我的问题：如果我创建、更新或删除数据，我应该调用刷新函数还是只在 redux 存储中编辑它？

刷新函数：

数据始终更新
过滤新添加的数据
两次请求，速度较慢，无响应（主要问题）

Redux 商店：

应用看起来响应迅速
一次性请求
丢失服务器端过滤功能，如果多个用户正在使用该应用程序，则数据不会更新（主要问题）

如有任何建议，我们将不胜感激

Answer 1

调度一个异步操作，该操作查询发生过滤的服务器，并在解析时使用刷新的过滤数据更新 redux 状态。

伪代码

// 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，而是任何 real-time front-end 应用程序）中调用刷新有点违背了使用 React 的全部原则。

你应该做的是，每当你的客户端发生 data-changing 操作时，你应该触发一个 API 调用，相应地改变你的 server-side 数据。将数据发送回客户端（你可以发送给所有客户端，如果你喜欢web-socket），保存到Redux状态触发一个re-render.

哪种使用 Redux 的 CRUD 编码风格更好？

Which is better CRUD coding style using Redux?

javascript

coding-style

single-page-application

reactjs

redux