Redux: Implementing Store from Scratch

Hello, i didn't understand why needed to return the function that remove de subscriber listener of listeners array.

Hi,

I have a very basic and fundamental question.

Why do we need to implement createStore while Redux provide it to us?

In which circumstances we need to create our own store and in which situation we can use Redux store?

I too was confused by this aspect of the createStore implementation. If you listen close, Dan mentions that the purpose of the return statement is to avoid having a separately defined method to UN-subscribe a listener. Therefore, the return statement returns an anonymous function that takes a listener and removes that listener from the listeners array.

He is just showing how it works by providing a simplified example of what goes on "behind the scenes."

And I want to extend your great answer with one thing, because it may be not obvious for everyone. We need to save store.subscribe(render) to a variable, which we will call with parenthesis for unsubscribe. It may seems like:

//For subscribe
let renderSubscription = store.subscribe(render);
//For unsubscribe
renderSubscription();

I got a question about how to implement the unsubscribe here, why we are not providing an dedicated method to do it?

If anyone is wondering how to unsubscribe a listener, you have to pass in the same listener you're about to remove (which is a little unintuitive), unless I'm missing something:

document.addEventListener('keyup', () => { 
   store.subscribe(render)(render);
}); 

You can modify createStore.subscribe to make things a little easier:

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


// Usage:
store.subscribe()(render);

Or, you know, just write a separate unsubscribe method.

"Hello, i didn't understand why needed to return the function that remove de subscriber listener of listeners array."

I was also wondering about this, until I reached 05:00 of this video https://egghead.io/lessons/react-redux-extracting-container-components-filterlink ... there you can see this implementation and its purpose in action.

Hello, i didn't understand why needed to return the function that remove de subscriber listener of listeners array.

That part took me a min too. He's just making a function available that we could use to remove a listener from the listeners array.

To use it, set your subscribe call equal to a variable. That stores the returned function.
const unsubscribeHey = store.subscribe(hey);

Then call that function later to unsubscribe the listener.
unsubscribeHey()

Check out https://codepen.io/mocasalter/pen/XvKKdZ?editors=0011