How to separate/decouple dispatch of Saga action from dispatch of Redux store action? #2226
Unanswered
alexandre-emmanuel
asked this question in
Q&A
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
It is universal design pattern to dispatch action (from React GUI component) to Saga middleware to get some external data and to continue with dispatching action to the Redux store to save those data in the store, e.g. the following code is processing action from React GUI component and subsequently it is dispatching RECEIVE_API_DATA with the aim to save the retrieved data in the store:
This pattern has 2 bad issues.
it hard-codes the link between 2 actions that can be and that should be independent. E.g. There can be Saga action to retrieve Article (by Id) from the database and there can be separate Redux store actions that save this Article entity into SaleItem, SaleOrderItem, PurchaseItem, PurchaseOrderItem, etc. There are some many different ways hwo to process the result from fetchArticle Saga Action. Of course, I can always include the additional parameter in the argument list of the Saga action and I can indiciate in this parameter with which Redux action the program should proceed and then I can hard-code this branching logic in the Saga function. But it is bad either. We can have many entities - Article, Person, Warehouse,... and we can want to execute different actions after getting data for each of them, that means - branching in each Saga function that retrieves Article, Person, Warehoue;
The React GUI handlers would like to have the full control (module exception handling) what happens after retrieval of Article data. E.g. if we add Article to the Sale document, then we would like to have
fetchArticle().addToSale().recalculateSale()
in the event handler of React component for Sale. And if we add Article to the Purchase document, then we would like to havefetchArticle().addToPurchase().recalculatePurchase()
in the event handler of React component for Purchase. Of course, we can achieve this by adding parameters (much more parameters, if the execution chaing is longer), likefetchArticle({id: 567}, actionType_ADD_TO_SALE, action2Type_RECALCULATE_SALE)
and have hierarchical branching in the Saga function for fetchArticle... But this is so un-scalable and un-maintainable that I feel that better design pattern should exist.So - my question is about existence of design pattern or techniques how to separate Saga actions from Redux store actions.
If Saga actions and Redux store actions were just async function then we could write simple code like:
And such code is really nice, scalable and maintainable, Is there similar solution for Sage-Redux?
I have more elaborate example on Stackoverflow: https://stackoverflow.com/questions/69551949/react-saga-method-calls-certain-redux-method-but-is-it-possible-to-decouple-th
Beta Was this translation helpful? Give feedback.
All reactions