Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Refactor a connected Redux component to use Unstated

    Andrew Del PreteAndrew Del Prete

    In this lesson, I refactor a simple Counter component connected to Redux to use Unstated instead. I explain some of the cognitive overhead of working with Redux and how Unstated can help simplify your application codebase.

    Additional Resources https://github.com/jamiebuilds/unstated

    reactReact
    reduxRedux
    javascriptJavaScript
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss