javascript - Redux - how unsubscribe listener works? - Stack Overflow

admin管理员组

文章数量:1401171

I am new to Redux. I wonder what unsubscribe listener fundamentally is and how it works? I know that register function returns an unsubscribe but in the following example when we call the unsubscribe method why it does not just trigger a new function nested inside the variable? As we can see:

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(); 

Thanks

I am new to Redux. I wonder what unsubscribe listener fundamentally is and how it works? I know that register function returns an unsubscribe but in the following example when we call the unsubscribe method why it does not just trigger a new function nested inside the variable? As we can see:

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(); 

Thanks

• javascript
• redux
• unsubscribe

Share Improve this question Follow edited Aug 24, 2019 at 12:06 Yilmaz 50k1818 gold badges218218 silver badges271271 bronze badges asked Jun 16, 2018 at 23:48 Diagathe JosuéDiagathe Josué 12.2k1414 gold badges4949 silver badges9393 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

I think it is a little late to answer this question, but to be more clear, I would like to present it. Key things to keep in mind are:

1. What exactly is store.subscribe, take a demo of the youtube subscribe option (and bell icon), now whenever channel admin uploads a new video, it instantly calls listener(i.e. subscribe) here and gets you notified, now if you unsubscribe then you won't get notified. Simple enough!
2. store.subscribe or say the listener function is called whenever the state is changed because of the dispatched action.
3. return type of the subscribe function is again a function the unsubscribes the change listener.

//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());

This will give the output

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

So you see, after unsubscribing the listener is not called automatically. So here is the final catch

As you call the unsubscribe, it is a function which is returned from the subscribe function so it does not call the subscribe function again, rather call another function which unsubscribes the change listener.

the unsubscribe function in redux is actually implemented inside the subscribe method in redux createStore method. Here is how it works:

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

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

We are invoking store.subscribe() and passing it a callback function. That callback gets called whenever the store changes.

The function signature explains that subscribe expects a function that will be invoked on every dispatch and returns a function that when invoked will unsubscribe the listener. imagine like this:

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

本文标签： javascriptReduxhow unsubscribe listener worksStack Overflow