How to dispatch an action to the redux-devtools store for importing a state from a component? - action

I'm currently trying to implement a panel integrated in my angular application which will allow me to import whatever json state file exported from redux-devtools using the same import feature as redux-devtools.
My application is properly integrated with #ngrx/store-devtools.
I can't figure out how to retrieve the devtools store from my component to then dispatch the action IMPORT_STATE as i saw on redux-devtools code:
store.liftedStore.dispatch({type: 'IMPORT_STATE', ...nextLiftedState});
The goal is to manually trigger the import state feature from redux-devtools but within a component of my application directly.
Is it possible to do that? And how to inject this store in my component to then use it?
Thanks in advance,
EDIT:
Actually, what i am trying to achieve is to have a component in my application which allows me to import different state (as json file) that i would have previously recorded from the redux-devtools extension to reach any pages of my application. Thus, this component needs to access to the redux-devtools store and dispatch the action IMPORT_STATE. What i did for the moment seems to not trigger the reducer for IMPORT_STATE action of the redux-devtools store. I think i'm missing something to include the redux-devtools store from the angular application.
Do you have any idea of how to achieve that?
Thanks in advance,

To dispatch into the store from the dispatcher in the redux devtools you just enter in the action definition as json and then click dispatch.
for example:
{
type: 'IMPORT_STATE',
... whatever payload contents you need here ...
}
To open the dispatcher, click the little keyboard button in the middle at the bottom of the devtools.

Related

NativeScript-Vue - Navigation from outside component

My application is receiving push notifications, when a push notification arrives, I would like to navigate to a specific component of the application.
The problem is that the callback in which I'm handling the push notification is not a vue component and so I can't
call this.$navigate.
So I tryed to inject directly Vue:
import Vue from 'nativescript-vue'
and then:
Vue.$navigateTo(Instrument);
But nothing happens. (The method is correctly called).
I have no other idea to addressing this problem. Any hint?
I should have used:
Vue.navigateTo(..) or Vue.prototype.$navigateTo(..)

How to create generic popup for across the app?

I am trying to create a popup which is available and controlled by across application.
so I keep the html assets in app template. and the I would like to show and hide the popup any page from the app.
I understand that, It can achivable by service. but I don't have much idea to implement this. any one suggest me the right way?
Required is : show popup from any page, close pupup on click of close button in the popup.
here is my Twiddle
In case of angular it can be achieved from factory object.
I would probably do this:
create a component for the popup
create a service for the popup that that exposes methods for setting a property called "isOpen" to true/false. Other parts of the app can use the methods for opening and closing the popup.
Inject the popup service into the application controller
Add it to the application template in an {{if popupService.isOpen}} block
Good luck, remember to write lots of tests, make sure each part is working before you go to the next step, and remember to consult the guides often ;-)

where to put template button click event

I have button on my template(not in component) and need to add click event for it.what is the correct js file to place my click event ?
I search from ember site where it state that component action should put in respective component js action or it will bubbule up to route js . Either It have not mansion or I couldn't find where to put template(not in component) action since there are no place to add the action other than respective route js file.
so is it ok to put my template action in respective route js file ?
I am novice to ember and sorry for poor English.
Yes, you can put action handler(s) inside your route.
You can handle template event from either corresponding controller or router.
Just put the handling function inside actions property inside either place.
The order template look for action is controller first ,router and upper router untile application router.

Ember CLI path based on server response

I'm developing a substantial ember app, using Ember CLI, and I'm struggling with a few aspects of it.
What I want to do is:
Show a dropdown list of options
When the user picks an option, post their choice to the backend
The response from the server contains data based on what the user picked in the dropdown. After getting the server response I want to transition to a new route where the path ends with one of the values returned by the server.
For example:
/path/to/dropdown -- shows the dropdown for the user to pick from, which is then POSTed to the backend. The backend responds with, amongst other data:
slug: <stringValue>
This then transitions to:
/path/to/slug -- where slug is <stringValue>
So far I've got 1 & 2 above working, but I can't figure out how to make step 3 work. I've tried using a serialize function in the /path/to/slug route and the /path/to/dropdown controller, but it always returns undefined.
The AJAX call to the server, based on the user's dropdown choice, happens in the /path/to/dropdown controller.
I've set up the router as:
this.route('options', { path : ':slug' });
Would be great if someone could point me in the right direction; I hope my example is clear enough but let me know if not.
Thanks.
To be honest I don't understand why do you use this.route('options', { path : ':slug' });. You just created the only route for all possible options (in fact, for all urls of form /anything), but that's not what you want.
I think your solution is this.transitionToRoute(url_string) which is available in any controller. Check the api example there. But before you should declare all that routes in the router and create operating files for them, of course.
If you don't want to create a route for each possible slug, so then your route is pretty excellent, but at least I'd consider to add one more path section. For example, this.route('options', { path : '/slugs/:slug' });.
After that you can run transitionTo and pass data (in any format) to it. The data will be assigned to the route model and you will be able to use it in the SlugRoute (and SlugController, if you didn't redefined the setupControler method) as a this.get('model') variable.
If you want to run transition from the view, firstly you need to obtain the controller and send a special command to it.

In Ember.js, how can I force a route to be in the loading substate?

Is it possible to reenter the loading state manually?
Right now I have a template that matches the loading rule mentioned at their webpage:
Ember will find a loading route at the above location if
[...]
a properly-named loading template has been found, e.g.
bar/loading
foo/loading
loading
When transitioning to the page, it uses this template, which is great. However, I would like to enter that same loading state while my web request busy. Currently, I am reimplementing that template in the page and toggling it, which duplicates code. I would rather tell ember when I am in loading state or not manually.
Edit: In response to comment, the web requests both set and push data to the model (search button and "infinite scroll" pagination)
You could use transitionToRoute() to transition into (and out of) a loading route while your request is in progress.