Vuex meets Redux-saga
According to Yassine Elouafi, creator of the redux-saga:
redux-saga is a library that aims to make side effects (i.e. asynchronous things like data fetching and impure things like accessing the browser cache) in React/Redux applications easier and better.
From my point of view, redux-saga is a best choice for handling side effects in applications. It offers a good tradeoff between “purity” and “functional approach”. While such great things like redux-observable are forcing you to learn RxJS and think in streams (which is awesome but requires a significant mind shift) redux-saga sticks to generators, which are just a part of ES2015 standard.
The truth is, that redux-saga is designed in the way it could be easily integrated with any kind of storage, which implements 3 operations:
- subscribe — that’s how redux-saga becomes aware of current operation (such operations are called actions in Redux and mutations in Vuex)
- getState — used for obtaining current state of storage
- dispatch — used to fulfill put requests from sagas
In other way, communication between your saga and storage could be expressed with this picture:
So, with this approach, implementing bridge between redux-saga and Vue.js is as easy as a pie. The actual logic is just 3 lines long, with whole other code just being a wrapper to imitate behaviour, similar to sagaMiddleware in Redux. The usage is pretty obvious, you can try it live on JSBin, and the whole plugin is published on NPM as vuex-redux-saga
It’s awesome to see how the properly implemented software can easily work with pieces it was never designed for. For me it’s a sign of a good architecture approach and a good guarantee the project will live and expand.
