Let’s Write Better Vuex Action With Vuex Saga
Recently, I’ve been developing an App with React Js and I’m forced to learn a lot of things since I’m not natively used react before — mostly use Vue Js. I have to learn best practice of Redux, Redux caveats, and etc. The most exciting part is when I meet redux-saga.
Redux Saga is the async flow control for Redux. It can run some task in the background. Awesome! It also makes our async code become easy to test. I’m not going to dig redux-saga deeper, I just wanna tell that I love the concept how sagas are tested. Simply only needs deep compare two variable. Check the example here at the bottom section. While in vuex we need more efforts to test an action. We need to mock our fetch function with inject-loader or something like sinon. Check the example here at the action test section.
If we compare the testing code of vuex and redux-saga, we’ll probably take a side to redux-saga which has a much simpler testing code. I like how vuex module written but not the testing code.
Motivation
At first, I was thinking to integrate redux + redux-saga with vue component—since the vue-redux is existed—and make some mixin for it. But, we have to notice that redux-saga has a wide learning curve — especially at the Generator Function chapter. No, I don’t want it. I just want to make something that easy to use just like Vue js and Vuex.
So, I decided to make a plugin for Vue to simplify our Vuex actions and make it become testable and easy to use. It called vuex-saga.
Easy Testing Code
Actually, I’d told about the reason why do we need vuex-saga and all about it in its repo page. But I don’t mind if you want to hear about it again here. Vuex Saga is using generator function which is used by redux-saga. Previously, I learn the basic concept how redux-saga effect works. Fortunately, it is written clearly at redux-saga documentation.
“…In fact, neither
putnorcallperforms any dispatch or asynchronous call by themselves, they simply return plain JavaScript objects.”
Evidently, We only need a runner that take care some generator function inside an object. Simple! We’ve found the first problem solving about difficult testing code writing. Now, With Vuex Saga we can test our vuex action like redux-saga did.
Same as redux-saga, it doesn’t need to run the real fetch request. Instead, only compares its function and its arguments from the inside of an object.
Avoid Callback Hell
The second problem is How to avoid Callback Hell. It’s not redux-saga’s feature but it’s generator function’s feature. It will make our async code written like sync code just like async and await syntax— I just heard that it will ready very soon. We will save from the callback hell if we’re using vuex-saga or generator function. take a look again.
With Vuex Saga we can write our code like this one.
It Can Run In Parallel Too
Sometimes being synchronous is not the best choice but write synchronously is. We can write with synchronous style but still do async service in parallel.
The generator function will pause it until both of them is finished.
Well Integrated With Vue Component
It doesn’t help us to write some vuex action only, but it also well integrated with the vue component. It has mapSagas() method which will return local methods for vue component just like vuex’s mapActions() method. So, don’t worry to have a problem to run the sagas within our vue component. It’s Easy! Try it now~
Conclusion
Vuex Saga is not Redux Saga, they’re different. While redux saga is being advanced async control, the vuex saga only makes our code become easy to test and easy to write. We do need a testing process for Testing Driven Development to make our App become easy to debug and minimize the potential of bugs. Have you tested your code? you should.
Closing
I do open to any criticism and any suggestions. Not only about the content but my English too. Please tell me if I had a mistake or if you have some great ideas, so I can make a better content for the next. Hopefully, It can be useful for you. Don’t forget to Like and Share~
Let’s talk about some projects with me
Just Contact Me At:
- Email: bosnaufalemail@gmail.com
- Skype Id: bosnaufal254
- twitter: @BosNaufal
