Как вы отлаживаете состояние пользовательского интерфейса с помощью Immer? - PullRequest
Новая
       23

Как вы отлаживаете состояние пользовательского интерфейса с помощью Immer?

0 голосов
/ 08 ноября 2018

У меня есть кнопка, которая вызывает handleApplyFiltersButtonClick, которая обновляет состояние, применяя фильтры к некоторым данным. У меня есть ошибка где-то. Я изо всех сил пытаюсь отладить состояние, которое использует продукцию Иммерса, поскольку все является либо прокси, либо функцией. Я бы предпочел не использовать 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,
    );
};

1 Ответ

0 голосов
/ 19 ноября 2018

Когда вы передаете функцию в качестве первого аргумента 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);
    },
  );
};
...