Build a Redux-style state manager in JavaScript with a State class that stores values and notifies subscribers on changes. The implementation uses an array of callbacks, a subscribe method that returns an unsubscribe handle, and a notifySubscribers method that fires all registered callbacks when state changes.
Chapters
Okay, so now we're gonna be implementing Redux. It's a specific version of Redux, so I'm gonna first show what are the expectations. Okay, so the expectation is for us to create a const, for example, um, stateManagement new StateManagement, which it receives value, for example, some kind of value which we can say hello. And then what we can do with it So we can say, um, state management, um, change state to word. Okay, so it should change state. And then, yeah, getState, we need to print word. And we're not gonna do undo, but now we can also do state management subscribe. Subscribe, subscribe to, to a function, okay. And, and we have, for example, we define here subscribers. We can const subscriber, which it will be, it receives a state and it console.log state, but we also and say that it's subscriber 1, for example, and this way we will know. So I'm gonna print subscriber 1 state. Okay, and I can do subscribe of this subscriber, and I can also do, uh, another one. Let's do 2 subscribers. Okay, subscriber2, and we have subscriber2 here, and we subscribe subscriber2. Okay, and what it returns to me is const subscriber1, subscriber1 state management, for example. This is what it returns to me. And the same with subscriberTo, subscriberTo state management, for example. And then, so what I can do is I can change the state. Now when I change this state now to for example, uh, I don't know, Apple. Then what's gonna happen is we need to first see the state, but also what is gonna happen is that we, we should see that subscriber1 and subscriber2 were notified. And what I also can do, I can do, uh, subscriber1 unsubscribe, unsubscribe, unsubscribe, but subscriber only, subscriber 1. And now I'm changing the state to, to coffee. Okay, and now what should happen is is that only subscriber 2 should be notified, okay? And this, this basically defines all the API that we need to do. And then we also do unsubscribe to second one, and when we change it to T, we shouldn't see anyone that is subscribed or unsubscribed, okay? So this is our implementation, and, and this is what was requested from me to implement in this interview. Okay, so now let's go ahead and implement it. So we're gonna implement a class, class State. Oh well, you, you can see that my lovely My lovely Copilot is autocompleting it for me, which is, which is great. And we're just gonna go ahead and talk about the state management. So we receive a state, this is a string in this case, okay, and our constructor stated the state and we initialize subscribers. Okay, we have a function changeState. Okay, and it's setState, but it's also notifySubscribers. Okay, getState just returns state. So when I have a subscriber, which is a function. Okay, so we adding, uh, we've had— we're adding a function to our subscribers, but also we return an object that have a function unsubscribe, and this function also can unsubscribe mySubscriber. And we have a function that notify all of the subscriber, which will mean we know that our function receives state and it prints it. Okay, so this is This is what was requested, and now let's run this and see. Subscriber is not defined. Subscriber is not defined. Let's see, where is it? Mm-hmm. Subscriber. Maybe I need to save. Clear. Do it again. Subscriber is not defined. In which file? Okay, I'm gonna pause and check the issue for one second. Okay, there was some issue with the save, but, um, the code is the same. One thing is that we need to put here subscriber 2, and I'm gonna run. So we see the, the world, and then we add subscriber, and then we change to Apple. So subscriber 1 and 2 see Apple. Then we do unsubscribe, and then we do coffee, and then only subscriber 2 has coffee. And then we unsubscribe the second one, and we change to tea, and then no one is subscribed. Okay. So, um, this is basically how, um, also Redux works, or how observer works. So they contain subscribers and they notify subscriber when state is changing, and you can also unsubscribe the subscriber. So this is what was required to implement
