Question

我对单页面应用程序的编码样式有一个简单的问题。我的前端正在使用 React Redux

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

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

刷新功能：

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

Redux商店：

App看起来很敏感
一次性请求
如果多个用户正在使用该应用，则不会更新丢失的服务器端过滤功能和数据（主要问题）

任何建议将不胜感激

Answer 1

在本地编辑商店以提供即时反馈，然后发送请求，当您收到回复时，使用新数据整合商店

基本上，做两件事并获得两个世界的最大利益

Answer 2

调度异步操作，该操作查询服务器发生过滤器的位置以及何时解析，使用刷新的过滤数据更新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 3

在React应用程序中调用刷新（不仅是React，而且是任何实时前端应用程序）都会违反使用React的全部原则。

您应该做的是，每当客户端发生数据更改操作时，您应该触发API调用，从而相应地改变服务器端数据。将数据发送回客户端（如果您喜欢Web套接字，可以将其发送给所有客户端），将其保存到Redux状态以触发重新呈现。

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

3 个答案: