Может кто-нибудь объяснить функцию createStore и как просто передать ей функцию счетчика, чтобы она узнала о состоянии?

Question

Эта функция createStore принимает функции редуктора, но я не совсем понимаю, что происходит. Откуда она знает, каково текущее состояние счетчика, когда мы выполняем store.getState (), что я знаю, что createStore () вернет объект функций, но я не понимаю, как они работают.Кроме того, зачем нам нужен массив Listeners, я знаю, что кто-то объяснил, что, но я ищу более простой пример, я был бы признателен, если бы кто-то объяснил, что будет иметь этот массив и почему мы отписываемся от этих слушателей в конце.

Я бы действительно проявил осознанность, если бы кто-то объяснил мне, как отлаживать этот код, я продолжаю получать пустые значения в Chrome Debugger.

Последний вопрос: как просто передать функцию счетчика, чтобы она узналаэтого состояния.Я не вижу никаких назначений типа state = state внутри самой функции редуктора.Большое спасибо заранее.

const counter = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default: 
      return state;
  }
}

const createStore = (reducer) => {
  let state;
  let listeners = [];

  const getState = () => state;

  const dispatch = (action) => {
    state = reducer(state, action);
    listeners.forEach(listener => listener());
  };

  const subscribe = (listener) => {
    listeners.push(listener);
    return () => {
      listeners = listeners.filter(l => l !== listener);
    };
  };

  dispatch({});

  return { getState, dispatch, subscribe };
};

const store = createStore(counter);

const render = () => {
  document.body.innerText = store.getState();
};

store.subscribe(render);
render();

document.addEventListener('click', () => {
  store.dispatch({ type: 'INCREMENT' });
});

Answer 1

Как он узнает, каково текущее состояние счетчика, когда мы делаем store.getState()?

Он хранится в переменной state.Первоначально это undefined, и всякий раз, когда вы вызываете dispatch, он вызывает вызываемый редуктор и выводит новое состояние.Чтобы получить начальное состояние, он делает:

 dispatch({});

, который затем вызывает редуктор как:

 state = reducer(/*state: */ undefined, /*action: */ {}) /*0*/

, который войдет в ветвь коммутатора по умолчанию и вернет 0,следовательно, state теперь равно 0.Если вы снова вызываете диспетчеризацию, например:

  dispatch({ type: "INCREMENT" });

Затем редуктор вызывается снова, но на этот раз входит в другой режим коммутатора, состояние увеличивается:

 state = reducer(/*state:*/ 0, /*action:*/ { type: "INCREMENT" }) /*1*/

Кроме того, зачем нам нужен массив Listeners?

Поскольку несколько частей вашей страницы могут обновляться при изменении определенного состояния.Поэтому вы можете подключить к нему несколько слушателей, которые затем будут вызываться при обновлении состояния.

Почему мы отписываем этих слушателей в конце?

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

как просто передать функцию счетчика, чтобы она узнала о своем состоянии?

Это не так.Как показано выше, reducer (в данном случае counter) вызывается с пустым действием, которое затем приводит к исходному состоянию.

Я бы действительно проявил осознанность, если бы кто-то объяснилКак отладить этот код

Я бы поместил несколько точек останова, например, в первую строку count, dispatch, функцию render и обработчик onClick, затем перезагрузил бына странице, чтобы увидеть, что он вызывает count из dispatch, затем каждый раз, когда вы нажимаете на страницу, он будет проходить такой код по клику -> dispatch -> count -> render.