Где в коде ошибка, что не выводиться counter в консоль?

Question

[Artem Tsarev]

function createStore(reducer) {
	let state = initialState;
	let callbacks = [];
  
	return {
	  getState() {
		return state;
	  },
	  subscribe(propType, callback) {
		callbacks.push(callback);
	  },
	  unsubscribe(fn) {
		console.log("Unsubscription");
	  },
	  dispatch(action) {
		state = reducer(state, action);
		callbacks.forEach((callback) => callback());
	  }
	};
  }
  
  const initialState = {
	counter: 0
  };
  
  const reducer = (state = initialState, action) => {
	switch (action.type) {
	  case "INCREMENT": {
		return {
		  ...state,
		  counter: state.counter + 1
		};
	  }
	  default:
		return state;
	}
  };
  
  const store = createStore(reducer);
  
  const fn = (counter) => console.log("Counter has been changed", counter);
  
  store.subscribe("counter", fn);
  
  setInterval(() => store.dispatch({ type: "INCREMENT" }), 1000);
  setTimeout(() => store.unsubscribe(fn), 3111);

Comments

[WbICHA]

Так ты значение не передаёшь.

[Artem Tsarev]

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

[WbICHA]

Artem Tsarev, callbacks.forEach((callback) => callback());

[Artem Tsarev]

WbICHA, огромнейшее спасибо, вы очень сильно меня выручили)

Answer 1

[User70]

На самом деле в коде было 2 ошибки и функция unsubscribe была не реализована.

const initialState = {
    counter: 0
};

function createStore(reducer) {
    let state = initialState;
    let callbacks = [];

    return {
        getState() {
            return state;
        },
        subscribe(propType, callback) {
            callbacks.push(callback);
        },
        unsubscribe(fn) {
            const index = callbacks.indexOf(fn);
            if (index !== -1) {
                callbacks.splice(index, 1);
                console.log("Unsubscription");
            } else {
                throw new Error('Unsubscription error, callback function not found in store.')
            }
        },
        dispatch(action) {
            state = reducer(state, action);
            callbacks.forEach((callback) => callback(state));
        }
    };
}

const reducer = (state = initialState, action) => {
    switch (action.type) {
        case "INCREMENT": {
            return {
                ...state,
                counter: state.counter + 1
            };
        }
        default:
            return state;
    }
};

const store = createStore(reducer);

const fn = (state) => console.log("Counter has been changed", state.counter);

store.subscribe("counter", fn);

setInterval(() => store.dispatch({ type: "INCREMENT" }), 1000);
setTimeout(() => store.unsubscribe(fn), 3111);

Comments

[Artem Tsarev]

Спасибо, решение идеально работает! Подскажите, где была допущена вторая ошибка?

[User70]

Artem Tsarev,

const fn = (state) => console.log("Counter has been changed", state.counter);

Тут была не совсем ошибка, но с учётом не реализованной подписки по "propType".
Возвращаем стэйт целиком, вместо одного пропа на изменение которого, судя по коду, подразумевалась подписка.

Теперь можешь реализовывать использование propType.