Redux for maintaining only shared data

Question

In our Angular app, we are planning to use Redux but decided that we will use it for managing only the data that are shared by at-least two components. The data that are used by only one component will be directly fetched without using Redux. For e.g. assume that a component has to display a list of values and these values are not shared with any other component then we will fetch this list using service. But while fetching this data it may affect some other state in the store, like it may dispatch some action like NETWORK_REQUEST_SENT, NETWORK_REQUEST_COMPLETED, so that a spinner/overlay component can change its display.

Now the question is which part of the code should be responsible for dispatching these actions.

• Scenario 1 : The container component that fetches the data from the service could dispatch these actions, but I don't think it belongs here.
• Scenario 2 : The service which makes the HTTP call could dispatch these action, then that means the service has to subscribe to the HTTP observable and return its own observable for the component.
• Scenario 3 : Could do it in a Redux middleware, but then we have to dispatch an action for fetching the list of values and that means the list of values has to be stored in the store, that we don't want.
• Scenario 4 : As mentioned here, we could create an abstraction layer but then it feels like there is no need for middleware then.

Darr

so where is the question ? – Wittol

@RahulSingh It is clearly mentioned "Now the question is which part of the code should be responsible for dispatching these actions." – Darr

scenario one seems to be the best bet as of now or you can make use of effects to dispatch actions from the service also – Wittol

A component doesn't even know that the data comes from HTTP request, it simply calls the service, then how it can dispatch an action saying NETWORK_REQUEST_SENT – Darr

so i feel that service should make use of effects and disptch the action directly not from component its a bit debatable :) – Wittol

Follow this link medium blog and you're on the right path – Bergman

@Bergman I don't see how that article answer my question? you are talking about setting up a store, whereas my question is about managing only shared state and responsibility of dispatching the actions. – Darr

What does a store contain? Answer it state. How states are updated using dispatch. So what exactly you're looking for? I believe that guide can help you to set-up store and manage states – Bergman

Answer 1

If you are using HttpClientModule you can register an interceptor, like explained in https://medium.com/@ryanchenkie_40935/angular-authentication-using-the-http-client-and-http-interceptors-2f9d1540eb8

You can invoke NETWORK_REQUEST_SENT when it is invoked and NETWORK_REQUEST_COMPLETED in finally to invoke an action when the request completes. Then there is no need to have another observable.

Firstling

Interceptor, I was aware of, may be my example might not be correct, but I was asking a question in general, when you work with some state which is not stored in redux but it has a side-effect which will affect some other state stored in redux, in that case who will be responsible for dispatching those actions, am I clear? – Darr

You excluded 3) yourself. I'd avoid 1 if a generic solution is possible like with HTTP requests that use a shared service. If this is not possible, or doesn't make sense, because an action is only used from a single component, then invoke it from this component. – Atlee

I excluded middleware because I don't want to keep all the state in the redux store, what do you think about option 4 – Darr

I didn't find the linked post too interesting at first glance, but yes. This is what we came up with. I have a controller class (that's what we named our abstraction layer) for each component that provides the API the component needs, but doesn't expose anything else to the component. This way the components done't know anything about business logic or Redux. For views that consist of multiple components, we have a parent controller that provides the controllers for a set of components. We did this to be able to share the implementation for Flutter (mobile) and Angular Dart (web). ... – Atlee

... Only the view layer needs to be replaced. So if you have more than just the two action examples you mentioned, then I would go with this approach. – Atlee

We do store every state in the Redux store though. – Atlee

Option 4 is what I am thinking of doing, I am not storing everything in redux because we have lots of data most of which are not shared, if we keep it at component level then it will be garbage collected once the component gets destroyed buy in redux it will unnecessarily occupy memory – Darr

Sure, used selectively this definitely makes sense, or in general depending on your kind of app. You could also use an additional store for a part of your application (component). – Atlee

Thanks for your time, will wait for few more days before accepting the answer – Darr