Refactor a connected Redux component to use Unstated

Instructor: [00:00] I have some code here that I have taken from the React Redux documentation. It's just a simple counter that you can increment, decrement, increment if odd, increment async. It takes a second, and then it increments.

[00:13] For this lesson, I would like to refactor this Redux code to use unstated instead. If you're familiar with Redux at all, it could really be thought of as three parts -- a store, actions, and reducers.

[00:25] For this particular example, I have a normal React component that accepts a value and two functions -- onIncrement and onDecrement. My application doesn't really care where those properties come from, just that they exist.

[00:40] If we go back to the index.js entry file, we can see that I have set up a store and I've passed a counter reducer to it. I have mapStateToProps where I am passing the state as a value. I also have a mapDispatchToProps where I have two functions -- onIncrement and onDecrement where I am dispatching an increment and decrement action.

[01:02] Finally, I am connecting it all together and passing my mapStateToProps and my mapDispatchToProps to my counter components. Now, my counter has two those methods that I've created and a value coming from my store.

[01:14] I'll assign this connected component to a new variable called ConnectedCounter, and then I render it as a child or grandchild of provider so Redux is made aware of it.

[01:22] Now, I do load Redux, but it can be a little over the top for my project's needs. There's quite a bit of boilerplate whenever you can to add a new action or reducers. Depending on your application structure, you may have attached three files. You also may need to think about asynchronous requirements and install middleware like Redux-thunk or Redux-saga.

[01:39] Redux has a lot of benefits like time travel. Again, sometimes, a simple approach is better. To refactor this from Redux to Unstated, I first need to import a couple of things. I am going to do provider, subscribe, and container from unstated.

[01:55] I am going to ahead and comment out all the Redux code so I don't have any conflicts. I can do this, this, and all these.

[02:02] The next thing I am going to do is extent this container class I've importer. We are going to say class CounterContainer extends Container.

[02:15] The first thing I am going to do is add some state. I'll say state, make an object with the count of zero. Next, I am going to add some methods. We'll do increment first, say this.setState, and I'll just increment our count by one, so +1. I'll copy this whole thing. We'll say decrement, and do -1.

[02:41] The next thing I need to do is subscribe to this container. I can do that by creating a new variable called ConnectedCounter. We'll make this a functional component. We'll say subscribe to, and we can pass this an array of containers. We'll do CounterContainer and subscribe provides a rendered prop for us to use.

[03:02] Since we are subscribed to one container, we'll have one property available to us. It's a counter. This is where we can inject our normal counter components. Counter, and we'll pass some properties to it, value=counter.state.count.

[03:19] OnIncrement...copy this. OnDecrement. Close it up. It looks like I have some left over Redux stuff in here. I'll scroll under the bottom, and I'll remove my store from provider. Since unstated also provides a provider component, I can just leave it just as it is. This should work now.

[03:43] I hope this lesson at least gives you a starting point on how to refactor your code base from Redux unstated. Remember, try to use Redux built in setState first before introducing a library like Redux or even unstated.