时间戳

首页 > 解决方案 > 无需直接访问即可获取商店数据的更好方法

reactjs - 无需直接访问即可获取商店数据的更好方法

问题描述

假设商店有这样的数据：

{
  filter: {
    id: 'John Doe'
  },
  page: 1,
  pageSize: 10
}

我想从服务器获取具有这些值的数据。

我可以通过使用 React-Redux 的 connect 方法来实现：

const mapStateToProps = state => ({
  filter: state.filter,
  page: state.page,
  pageSize: state.pageSize
});

@connect(mapStateToProps)
class SomeComponent extends Component {
  getData() {
    const { filter, page, pageSize } = this.props;

    fetch(...);
  }
}

在 getData() 方法中，我可以通过连接来访问这些属性。

它工作正常，但是当我尝试在获取数据之前更新这些变量时出错，例如搜索，它不起作用。

search(newFilter) {
  dispatch(setFilter(newFilter));
  this.getData();
}

请注意，搜索是一种在用户提交搜索表单时接受键值对象的方法。

这将不起作用，因为它在通过调度更改过滤器值之前从服务器加载数据。

为了解决这个问题，我必须等到过滤器更新并作为新道具传递，但是没有办法等到过滤器被更改。

其他选项可以直接访问 store 的 state，比如 state = store.getState()，但是我听说 store 不能导出，因为 store 中的 state 必须通过 action 更新，而不是直接更新，即使我不接触 store 的 state ，这是危险的方式。所以我想在不直接访问商店的情况下解决。

有没有办法获得其他解决方案来获取商店的数据，而不是来自道具（因为为时已晚）但也不能直接访问商店？

使用 connect 无法获取刚刚发送的最新数据。

或者，对于所有这些功能是否有更好的方法？

任何建议都会非常感激！

标签： reactjsreduxreact-redux

解决方案

你可以做一个 action getData()，它的订阅速度比this.props在组件中要快。另一种选择是，将getData()函数作为第二个参数发送callback() 给您setFilter(newFilter, this.getData())并在方法内调用它setFilter()。这听起来是个不好的方法，但它应该可以工作，我建议你使用 action creator 来获取 Redux 应用程序中的数据。

推荐阅读