Как пользовательский интерфейс обновляется в примере Redux Todolist

0

Все:

Я новичок в React и Redux, когда я прочитал пример кода TodoList (хотя это просто ReactJSers, но все же очень сложный для меня), мне интересно, после того, как мы отправим действие, а магазин изменит todo, где пользовательский интерфейс замечен, чтобы обновить его представление? Я думал, что должен быть какой-то код вроде setState(), но я не могу его найти.

Итак, может ли кто-нибудь дать мне подсказку, как работает подписка в этом примере, вы можете начать с:

VisibleTodoList.js

onTodoClick: (id) => {
  dispatch(toggleTodo(id))
}

Или

U может поговорить с этим примером счетчика, после того как onClick (или onIncrement или onDecrement) запущен, как React знает, что store.getState() должен быть вызван, а компонент внутри Counter должен быть обновлен?

<Counter
      value={store.getState()}
      onIncrement={() => store.dispatch({ type: 'INCREMENT' })}
      onDecrement={() => store.dispatch({ type: 'DECREMENT' })}
    />,

благодаря

Теги:
redux

1 ответ

1

Обратите внимание на последнюю строку в https://github.com/reactjs/redux/blob/master/examples/counter/index.js. Присутствует прослушиватель:

store.subscribe(render)

Согласно документации Redux:

Добавляет прослушиватель изменений. Он будет вызываться в любое время, когда будет отправлено действие, и некоторая часть дерева состояний может потенциально измениться. Затем вы можете вызвать getState(), чтобы прочитать текущее дерево состояний в обратном вызове.

  • 0
    Спасибо, теперь я понял, как работает counter, не могли бы вы помочь с тем, как этот пример todolist достиг этого?
  • 0
    Слушатель вызывается каждый раз, когда вы отправляете новое действие, которое запускает редуктор github.com/reactjs/redux/blob/master/examples/counter/reducers/…, который выполняет копирование состояния и изменяет правильное свойство скопированного состояния.
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню