在 React Redux 应用程序中，我在哪里从服务器获取初始数据？

Posted 2023-02-16

【中文标题】在 React Redux 应用程序中，我在哪里从服务器获取初始数据？

【英文标题】：Where do I fetch initial data from server in a React Redux app?

【发布时间】：2016-08-15 12:18:37

【问题描述】：

我已经开始学习 React / Redux 并且偶然发现了一些可能是一个非常基本的问题。下面是我的应用程序中的 sn-ps，为简单起见删除了一些代码。

我的状态由一组默认为空的站点描述。稍后，reducer 将有LOAD_SITES 操作以在用户分页到不同页面时加载一组不同的站点，但现在它什么也没做。 React 首先渲染PublishedSitesPage，然后渲染PublishedSitesBox，然后循环数据并渲染各个站点。

我想做的是让它使用默认的空数组渲染所有内容，同时启动“从服务器加载站点”承诺，一旦解决，就调度 LOAD_SITES 操作。拨打这个电话的最佳方式是什么？我在考虑PublishedSitesBox 或componentDidMount 的构造函数。但不确定这是否可行——我担心我会以这种方式创建一个无限循环，并不断重新渲染。我想我可以通过沿“haveRequestedInitialData”行设置一些其他状态参数来以某种方式防止这种无休止的循环。我的另一个想法是在完成ReactDOM.render() 之后立即做出这个承诺。最好和最干净的方法是什么？

export default function sites(state = [], action) 
  switch (action.type) 
    default:
      return state;
  

...

const publishedSitesPageReducer = combineReducers(
  sites
);

ReactDOM.render(
  <Provider store=createStore(publishedSitesPageReducer)>
    <PublishedSitesPage />
  </Provider>,
  this.$view.find('.js-published-sites-result-target')[0]
);

...

export default function PublishedSitesPage() 
  return (
    <PublishedSitesBox/>
  );


...

function mapStateToProps(state) 
  return  sites: state.sites ;


const PublishedSitesBox = connect(mapStateToProps)((sites) => 
  // render sites
);

【参考方案1】：

这个数据加载逻辑根本没有理由触及您的 React 组件。您在这里想要的是返回向您的 reducer 发送 action 的 promise，它对 store 进行适当的更改，然后导致 React 组件在适当的时候重新渲染。

（无论您是在调用 ReactDOM.render 之前还是之后启动异步调用都无关紧要；无论哪种方式，promise 都会起作用）

类似这样的：

var store = createStore(publishedSitesPageReducer);

someAsyncCall().then(function(response) 
  store.dispatch(someActionCreator(response));
);

ReactDOM.render(
  <Provider store=store>
    <PublishedSitesPage />
  </Provider>,
  this.$view.find('.js-published-sites-result-target')[0]
);

您的 React 组件是您商店的消费者，但没有规定它们必须是您商店的唯一消费者。

【讨论】：

谢谢，是的，这是有道理的，这是我正在考虑采用的方式之一，但不确定这是否是预期的方式，或者是否有某种“获取默认状态”魔法隐藏在某个地方的 react/redux 框架中。明天试试，看看效果好不好！

关于 Redux 存储的一个令人敬畏的事情是它实际上可以成为来自不同地方的数据的公共交换中心。例如，远程实时数据源的 Web 套接字可以在没有任何用户输入的情况下调度更新您的商店的操作，并且您的 UI 不需要知道或关心新状态的来源。

当然动作创建者可以做异步请求。

正确 - 然后在完成时分派不同的操作，具体取决于成功或失败。在这一点上，你想如何封装是一个问题——商店了解这些数据来自哪里以及如何获取它是否有意义，或者是别人的问题，它只关心使用它？ （取决于您的域；恕我直言，任何一个答案都可能是正确的）

【参考方案2】：

这里有一个明确的例子来说明如何做到这一点：Facebook Tutorial

至于无限循环，一旦你的数组不再为空，清除间隔。 这应该防止循环。

【讨论】：

感谢您的回复，但我已经阅读了该教程，这是一个非常好的教程，但它仅描述了 React 的数据获取。我要做的是在 React 与 Redux 捆绑在一起的应用程序中获取数据，其中数据（应用程序状态）应该与 React 组件分离。