Ionic 3 ngrx - injecting a provider into reducer

Ionic Framework ionic-v3
1

Hello,

I am using ngrx for state management. In one of my reducers I want to access functionality in a provider I created. I am not sure how to inject/access the provider functionality from the reducer (if it was a component I could inject it via the constructor).

Any ideas?

thanks,

Brent

2

This sounds anti-ngrx to me. Reducers are supposed to be pure functions. Providers call reducers, not the other way around. What are you trying to do? Maybe you are trying to perform an effect, which could go in Effects. But your question as currently stated seems off to me.

3

I am probably a little off : ) I am new to using ngrx.

I have an action which calls the reducer and passes a payload to the reducer. I want to perform a complex calculation which I put in a provider as a function on this data (used in other places).

Do you think an Effect would work in this situation?

Thanks

4

I don’t understand your need yet.

Sample reducer: Update username.
Sample effect: Update the remote database with the new username.

The effect listens to the reducer, and when the reducer makes a change, the effect makes a change also. That way, the local change is visible to the user immediately, and the remote change takes place eventually, without creating a bottleneck on the user’s device.

I don’t understand what calls your action. But reducers are pure functions. If you don’t know what that means, I recommend you read up, because you’ll think about them differently. You can think of a reducer as a black box that takes data and spits out data. It’s an island unto itself. I’m also not sure what “put in a provider” means tbh. If you have a provider that listens to the data in the Store, whenever you update the Store, the provider will hear the new value.

5

I have some functions I put into a provider which I then inject into pages and components. I would like the reducer to have access to these functions so I can modify the data prior to storing the state. Because the reducer is just a function, I am not sure how to access these provider methods from the reducer.

6

Let’s stick with the username example. Suppose you want to update the username, but you also want to add a greeting based on some criteria (Mr, Mrs, Dr, etc). That addGreeting function is the “extra” function in this example. Suppose addGreeting is inside the HelperFunctions provider.

Create a provider UserDataManager. One of the methods inside UserDataManager is updateUsername. We inject HelperFunctions into UserDataManager, and the relevant code looks something like this.

updateUsername(name: string) {
   const nameWithGreeting = this.helperFunctions.addGreeting(name);
   this.store.dispatch(new UpdateUsernameAction(nameWithGreeting));
}

The action calls the reducer to initialize data, store data, or delete data. You could think of it as a write to a disk.

If there’s code that repeats again and again inside your reducers, you could abstract that out as a helper function. But it won’t be part of an Angular provider. Just a standard ES6 module.:

export function foo(startingReducerData): dataAfterMassage

1 Like
7

Thank you! That helps a lot.

8

I know this is older post, but I wanted to do this to (to just get some info to add to the state)

this post looks like another interesting way to do it.