Using Sagas like middleware to reduce boilerplate, and putting actions to only other Sagas

[redux-saga]

Using Sagas like middleware to reduce boilerplate, and putting actions to only other Sagas

[yelouafi]

Is this against what sagas are about? I've just interpreted them as middleware with much more advanced capabilities.

Against no I dont think. But sagas can do more than that. See

http://stackoverflow.com/questions/34930735/pros-cons-of-using-redux-saga-with-es6-generators-vs-redux-thunk-with-es7-async

Is there any equivalent to next from middleware in sagas? If you noticed I do a put in my apiCall, but it has an undesired behavior as it also sends that action to the reducers. I want to be able to do a put that only my sagas can receive basically.

As long as the action types arent of any meaning to the reducer. It will ignore them. But you can if you want create a filter middleware that intercept all saga actions and put it after the redux-saga middleware in the middleware chain

[braco]

@yelouafi: what do you think of what @AriaFallah wrote, as a pattern? I too am put off by the repetitive boilerplate.

@AriaFallah: do you have more complete code anywhere public? Would be interested in seeing how that developed.

[AriaFallah]

@braco not really sorry. I haven't worked on that project where I was using redux-saga in a while.

[ryankask]

I found this issue after looking for solutions to reduce the amount boilerplate. For example, an API call like login "needs" three LOGIN_* actions, a login action creator, a login saga, and a login API utility function.

I haven't spent much time abstracting this although I did write an API request saga factory that looks something like the code posted above.

I'm eager to see what other users are doing.

[jiayihu]

I had the same issue, so I just created a small gist with my own implementation of an action creator factory: https://gist.github.com/jiayihu/811f2dc704d6ce6308d679a987348b20

Can be used as following:

export const addInvoice = createAction('ADD_INVOICE', {
  request: (invoice) => ({ invoice }),
  success: (invoice, result) => ({ invoice, result }),
});