Is it possible to determine the last called action in an Angular/Redux project in the code so that I can react on it in the observer? Currently I am using a property in my redux store which is set to the current name of the action in the corresposonging reducer, but is there an easier way to do this?
Related
Below is the flow of my app:
I have to fetch profile pics of creators of each posts in the list.
I have an action type FETCH_USER_PROFILE. The action contains userId to be passed to api call inside saga function.
Considering React application, the profile or Avatar component of the post dispatching the action based on the createdByUserId prop it receives from the parent post component.
I have a key in the reducer isFetchingUserDetails
whenever the action type FETCH_USER_PROFILE is dispatched, inside saga for it, I yield-put isFetchingUserDetails as true.
And when the response from api is received,I yield-put isFetchingUserDetails as false.
Based on isFetchingUserDetails I display the loader on Avatar component.
It works fine for one api call but when multiple dispatches of same action type is sent (with different userIds though) simultaneously, it modifies the isFetchingUserDetails continuously as api calls can take non-uniform time due to network constraints.
Due to this even for avatars or profile for which response is not fetched doesnot show loader because isFetchingUserDetails is set as true by the first response received.
Kindly suggest me what I can do in this scenario.
Should I make multiple action types with suffices as userId? Is this even possible?
Should I set isFetchingUserDetails suffixed with userId? But it would make multiple keys in reducers if the user count is 10k+
Using following example:
https://github.com/zeit/next.js/tree/canary/examples/with-redux-wrapper
After page has been refreshed getInitialProps get called and store get populated with initial state. But only on a server side. When comes to client side store is empty and initial state is passed a prop. Is there a way to set store state with initial state again or what should I do?
You should use redux persist with this example
https://github.com/zeit/next.js/tree/canary/examples/with-redux-persist
Hi I have a question about symfony application architecture,
In my application I create different user, but when a user is created, updated, deleted, or his picture change, I need to do some action.
What is the best way to do this ? I excluded to do this on a controller action. There is 2 others solutions :
Create differents events like user.created, user.updated, ... And dispatch it on the controller action and make different listener to do the different action like MailListener (for user.created) TaskListener (for user.created) for add a task.
Use a service like UserManager and on this service have a method like userCreated() and on this method call differents actions like sendMailOnCreated, addTaskOnCreated for example.
For you what is the best method ?
For me, your first solution is the best one. It's clearly a use case for the Event component. It will be easier to maintain and more readable.
Moreover, if you need to add more listener you just need to create another one and bind it to your event. You don't need to modify your controller anymore.
I am in reference to the router-store ngrx project (https://github.com/ngrx/router-store).
I am not clear how to use this project...
For instance let's take the following sample from the project documentation:
store.dispatch(go(['/path', { routeParam: 1 }], { query: 'string' }));
Is this meant to be use as a replacement to the angular 2 router: router.navigate(['/path...?
...or should I use the ngrx router-store only in certain circumstances? (if so which ones?)
Also what happens to the ngrx router-store when a angular 2 router html link e.g. <a routerLink="/heroes" is clicked?
More generally, can someone please explain what is achieved by the ngrx router-store project as compared to using the plain angular 2 router?
Or to rephrase, what does ngrx router-store brings in addition to the angular 2 router?
Edit: An interesting source of information and samples about ngrx is of course the ngrx example-app (https://github.com/ngrx/example-app).
I found a dependency to the router-store there but I have not been able to find where the router-store is used within the app...
FYI, here is the comment to be found in the example app about the router store:
#ngrx/router-store keeps router state up-to-date in the store and
uses the store as the single source of truth for the router's state.
The #ngrx/router-store exists so that it's possible for the store to be the single source of truth for an application's routing state.
Without it, there would be application state - the current route - not represented in the store. That means time-travel debugging using the DevTools would not be possible, as there would be no state in the store representing the route and there would be no actions representing route changes.
The router-store does not replace the Angular router; it just wires up listeners for routing actions and for the router itself.
When you emit a routing action using the go action creator, a "[Router] Go" action containing the specifed path is heard by the router-store which then calls the corresponding router method. When the router-store hears - from the router - that the route has changed it emits a "[Router] Update Location" action representing the route change and that action sees the router state in the store updated.
If, instead of using the go action creator, a routerLink is used to effect a route change, router-store will hear the change and will emit a "[Router] Update Location" action that will see the store's router state updated.
So, whether the route is changed via actions or more traditional links, the store always contains the router state.
With the "[Router] Update Location" actions representing route changes, you can undo said route changes via the DevTools - something that would not be possible if the router state were not represented in the store.
If you've not used the Redux DevTools, I would recommend you check them out:
Redux DevTools Extension
#ngrx/store-devtools
#ngrx/store-log-monitor
An example.
Say you have a selected id that you pass in the router state. That id references a customer.
Your url looks something like this: myapp.com/customers/7755664
When you route to the customer edit view, you can write a selector that gets the customer entity using the id from the router state. Say you want to scroll through the customers. You navigate to myapp.com/customers/7755653. The selector returns the customer, the select call emits and your view rerenders with the new customer.
It simplifies selectors and replaces the need to have a selectedcustomer property in your state.
I am using angular2-meteor.
When I try to pass a value between two components (when the value change in the first component, create an event in second component and use this new value), I have two ways right now:
One way is meteor way: using this.autorun and Session.get.
Another way is angular2 way: using Injectable service with EventEmitter.
Which way should be prior? Or is there any other better way? Thanks
Now I used angular2-meteor a while.
Although the angular2-meteor tutorial has no example so far about using or choosing Angular 2 service or Meteor Session.
But I feel angular 2 takes the lead in the front end, while meteor makes reactivity easier and also handle all back end things.
So I went with angular2 way using service to share between components. And service is very powerful like #todd-w-crone said.
If anyone has better answer, I will switch to accept that one.
I find it practical to create a new service called App.states.ts which is accessed globally and mimics Session (get / set).
I commonly import this service to all necessary components to get or set new value such as User.status, company.profile, lastProduct, etc.
Since this service is #injectable it can also make use of other services, in case a value hasn't been set already.
This allows me to ask for a variable in a component appState.getLastModifiedItem(), then in app.states.ts I'll write this function to pass this.modifiedItem or either:
Request another service item.service.ts to fetch data
Call another function with itemCollection.findOne({...}) and return such value.
You can configure Mongo queries as you want and either store static data in appState or keep subscription items in appState.
Do take into consideration that all subscriptions handled by an #injectable within a component are imported by such component. Be wary of conflicting subscriptions between components/services.