Redux - 取消订阅监听器如何工作？答案

【问题标题】：Redux - how unsubscribe listener works?Redux - 取消订阅监听器如何工作？
【发布时间】：2018-11-26 07:17:17
【问题描述】：

我是 Redux 的新手。我想知道退订侦听器从根本上是什么以及它是如何工作的？我知道 register 函数返回一个取消订阅，但是在下面的示例中，当我们调用 unsubscribe 方法时，为什么它不只是触发嵌套在变量中的新函数？如我们所见：

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

【解决方案1】：

我认为现在回答这个问题有点晚了，但为了更清楚，我想提出它。要记住的关键事项是：

store.subscribe 到底是什么，以 youtube subscribe 选项（和铃铛图标）的演示为例，现在每当频道管理员上传新视频时，它会立即在此处调用监听器（即订阅）并通知您，现在如果您取消订阅，那么您将不会收到通知。很简单！
store.subscribe 或者说，只要状态因调度的动作而改变，就会调用监听器函数。
订阅函数的返回类型又是一个函数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。

【讨论】：

【解决方案2】：

redux 中的 unsubscribe 功能实际上是在 redux createStore 方法中的 subscribe 方法内部实现的。以下是它的工作原理：

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

const unsubscribe = store.subscribe(handleChange)
unsubscribe()

【讨论】：

【解决方案3】：

我们正在调用 store.subscribe() 并向其传递一个回调函数。每当商店更改时，都会调用该回调。

函数签名说明 subscribe 需要一个函数，该函数将在每次调度时调用，并返回一个函数，该函数在调用时将取消订阅侦听器。想象一下：

function store.subscribe(callback){ 
    //execute the callback function
    callback();
    return store.unsubscribe()
}

【讨论】：