如何使用Immer调试UI状态？

Question

我有一个调用handleApplyFiltersButtonClick的按钮，该按钮通过将过滤器应用于某些数据来更新状态。 我在某处有一个错误。 我正在努力调试使用Immers生产的状态，因为一切都是代理或函数。 我宁愿不使用Immer，但这是车队的选择。

从文档看来，生产者函数通常采用当前状态，并且将带有参数草稿的函数传递给该状态，然后进行状态更改并记录下来……尽管这里不这样做。

如何查看更新状态？ 由于console.log（'nextState'，nextState）导致仅一个没有信息的函数。

handleApplyFiltersButtonClick = () => {
    const nextState =  produce((state) => {
        state.page = 1;
        state.appliedFilters = { ...state.filters };
        state.filteredHealthProviders = this.getFilteredHealthProviders(state.healthProviders, state.appliedFilters)
    })
    console.log('nextState', nextState)
    this.setState(
       nextState,
    );
};

Answer 1

当你传递一个函数作为第一个参数produce ， 生产者被创建，它是创建您传递给它的任何值的草案，并将该草案对你的函数produce回调。

如果您关心返回值，则需要使用传递给setState的函数来包装生产者。

handleApplyFiltersButtonClick = () => {
  const producer = produce((state) => {
    state.page = 1;
    state.appliedFilters = { ...state.filters };
    state.filteredHealthProviders = this.getFilteredHealthProviders(state.healthProviders, state.appliedFilters);
  })
  this.setState(
    state => {
      const nextState = producer(state);
      console.log('nextState', nextState);
    },
  );
};