Question

假设存储中的数据如下：

{
  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();
}

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

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

要解决这个问题，我必须等到过滤器更新并作为新的道具通过，但是没有办法等到过滤器被更换。

其他选项可以直接访问商店的状态，例如state = store.getState（），但是我听说商店不能导出，因为商店中的状态必须通过操作进行更新，而不是直接更新，即使我不碰商店的状态，这是危险的方式。因此，我想解决问题而不直接进入商店。

是否有其他方法可以获取商店数据，而不是从道具（因为为时已晚）而不是直接访问商店？

使用connect无法获取刚刚调度的最新数据。

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

任何建议都将不胜感激！

Answer 1

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

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

1 个答案: