-1

I'm a bit confused of using store (Vuex or Redux). To begin with, we all know that both were born for state management and we usually use them in case of modifying states of a component through other components.

However, according to my question, I supposed that we got component A and B. The scenario is:

  • While other components need to use state of B so we will store this state in store management and if B need to use axios, we also make it work in a store file as an action.

  • Next, in case of component A, none of its states need to be set for global usage but it still needs axios usage, so that - we use axios inside component A - is a good practice?

Sorry for my bad English, I know :(

Tien
  • 137
  • 1
  • 7
  • 1
    Yes - If component A has its OWN state that is never used outside that component, then making a call inside it is fine, but it kinda defeats the purpose of having a state manager like Redux. I personally would just hook it up to Redux for the single reason of being able to track and debug all my actions regardless, but thats just me personally. – Spencer Bigum Nov 07 '17 at 21:00
  • @SpencerBigum thanks for your response. That's what I wonder, because I think use only actions is a bit complicated. However, I will consider your idea! – Tien Nov 07 '17 at 21:05

1 Answers1

1

Well, for component B it's rather straight-forward. While you may call axios (or any other data fetching module) directly within your Component, and then pass the results into Store via action payload, it'll get complicated as long as your application starts growing and/or changing. Too many modules directly knowing about each other is bad idea.

I'd suggest following more traditional path: make axios a service used by Store, within its actions. This way your components are properly separated from data fetching process details; they only issue commands - actions - and receive the updates from Store; only Store knows how to execute those commands properly.

Now, for component A, which, as you say, has its state completely isolated, choice is wider. I'd at least consider using the same instance of axios as your Store does - as you do might need to configure and debug it in the same way that goes for component B case. Check this thread for example. )

Still, I can think of use cases when even data fetching should be isolated as well in component A - for example, if A is closer to being a different application overall. In this case sharing the data provider might just complicate the flow.

raina77ow
  • 103,633
  • 15
  • 192
  • 229
  • Thank for your response, I was busy these day to reply. Sorry first. My opinion is as same as yours. If we use the same pattern of component B for A, it makes our app now more jobs to do. There is no doubt that applying the approach of B for A may help us to debug in one way for all components, but again, as I said, more things to do. – Tien Nov 10 '17 at 16:35