1. 7
    Redux: Implementing Store from Scratch
    2m 28s

Redux: Implementing Store from Scratch

InstructorDan Abramov

Share this video with your friends

Send Tweet

Learn how to build a reasonable approximation of the Redux Store in 20 lines. No magic!

Lucas
~ 8 years ago

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

Negin Basiri
~ 8 years ago

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?

Sammy Gonzales-Luna
~ 8 years ago

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.

Justin Hugg
~ 8 years ago

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

Vadim Shvetsov
~ 8 years ago

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();
aaronisme
~ 8 years ago

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

Lars
~ 7 years ago

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.

Manuel Penaloza
~ 7 years ago

"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.

Monica
~ 5 years ago

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