Redux — как работает прослушиватель отписки?

Я новичок в Redux. Интересно, что такое прослушиватель отписки и как он работает? Я знаю, что функция регистрации возвращает отказ от подписки, но в следующем примере, когда мы вызываем метод отказа от подписки, почему он просто не запускает новую функцию, вложенную в переменную? Как мы можем видеть:

let unsubscribe = store.subscribe(() => {  
    // let unsubscribe nests a function   
    // execute every time the state changes
    const state = store.getState(); 
});
// but here instead of call the nested function it cancels the listener, how is it possible ?
unsubscribe();

Спасибо


javascript redux unsubscribe
person Webwoman    schedule 16.06.2018    source источник

Ответы (3)


arrow_upward
4
arrow_downward

Я думаю, что немного поздно отвечать на этот вопрос, но, чтобы быть более ясным, я хотел бы представить его. Основные моменты, о которых следует помнить:

  1. Что такое store.subscribe, посмотрите демонстрацию опции subscribe YouTube (и значка колокольчика), теперь всякий раз, когда администратор канала загружает новое видео, он мгновенно вызывает слушателя (т. получить уведомление. Достаточно просто!
  2. store.subscribe или, скажем, функция прослушивателя вызывается всякий раз, когда состояние изменяется из-за отправленного действия.
  3. возвращаемый тип функции подписки снова является функцией unsubscribes прослушивателя изменений.

//Action is an object with type property
const BUY_CAKE = 'BUY_CAKE'; 

// Action creator is a function that returns an actions 
function buyCake() {
  return {
    type: BUY_CAKE,
    info: 'first redux action',
  }
}

// initial state for reducer, Reducer -> (previousstate, action) =>newState
const initialState = {
  numOfCakes: 10
}

// This is our reducer function 
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case BUY_CAKE: return {
      ...state,  // making the copy of state object
      numOfCakes: state.numOfCakes - 1
    }
    default: return state;
  }
}

const store = createStore(reducer);
console.log("initial state", store.getState());
/*Returns the current state tree of your application. It is equal to the last value returned by the store's reducer.*/

// The subscribe listerner will be called eveytime an action is dispatched
const unsubscribe = store.subscribe(() => console.log("updated state", store.getState()))
store.dispatch(buyCake());
store.dispatch(buyCake());
unsubscribe();
store.dispatch(buyCake());
console.log("state after unsubscribe", store.getState());

Это даст результат

initial state { numOfCakes: 10 }
updated state { numOfCakes: 9 }
updated state { numOfCakes: 8 }
state after unsubscribe { numOfCakes: 7 }

Итак, вы видите, что после отписки слушатель не вызывается автоматически. Итак, вот последний улов

Поскольку вы вызываете unsubscribe, это функция, которая возвращается из функции subscribe, поэтому она не вызывает функцию подписки снова, а вызывает другую функцию, которая unsubscribes the change listener.

person Soumil Khandelwal    schedule 23.07.2020

arrow_upward
1
arrow_downward

функция отказа от подписки в redux фактически реализована внутри метода подписки в методе createStore redux. Вот как это работает:

//Inside store
    const subscribe = (listener) => {
           listeners.push(listener);
           return () => {
           listeners.filter(l => l !== listener);
        };
        };
// End of inside store 

const unsubscribe = store.subscribe(handleChange)
unsubscribe()
person PersianIronwood    schedule 19.09.2018

arrow_upward
0
arrow_downward

Мы вызываем store.subscribe() и передаем ему функцию обратного вызова. Этот обратный вызов вызывается всякий раз, когда изменяется хранилище.

Сигнатура функции объясняет, что subscribe ожидает функцию, которая будет вызываться при каждой отправке, и возвращает функцию, которая при вызове отменяет подписку слушателя. представить себе так:

function store.subscribe(callback){ 
    //execute the callback function
    callback();
    return store.unsubscribe()
}
person Yilmaz    schedule 01.02.2020