We Keep Coding

How can i get data from an action before other actions ? VUEX/NUXT

I have two actions in my store:
GetHitProducts
GetNewProducts
They are called in two different components:
sliders Component with GetHitProducts going first by HTML
So anyway the action called second or first by order sometimes, I need to set my first component like with an important priority. Because data after commit by GetHitProducts is using in the second component. Else I do have an error.
In slider's component, I do have a component Product.
In that component I make some logic that needs to store data in hitProducts, but if second slider's component renders first, it would not have stored the information and I get an error.
Can I call the action first when the page is loaded or something like that?
Maybe problem with the render priority, so is it possible to set the priority?
If yes, how can I do that ?
Main task is to get data by action GetHitProducts before render other components what will call other actions.
Store File HitProducts
Store File NewProducts
Component File HitProductsSlider
Component File NewProductSlider
THE PROBLEM - DEVTOOLS CALLED ACTIONS
Component PRODUCT and logic in the mounted

you can get data for the first component and watch the variable you are storing it's data, whenever watch triggers get the data for second component.

How to pass correctly( and beautifully) an onChange event to my Redux Store?

Im building a Betting aplication where the user inputs some predictions for Soccer Games.
My app have a array of matches in my Redux store. Like this:
matches:{{id:1, away_result:0, home_result:0, ...}}
So, I have a Matchlist Container that reads this data from my store and passes each one as props for a Match Component. My Match component has something like that:
<TextField value={this.props.game.home_result} onChange={this.homeScoreChangedHandler}/>
I want that in each onChange event of my TextField my data on the Redux Store to be updated.
For example: My bet is Brazil 1x0 Argentina. I want to, when I change the TextField and input "1", an action is dispatched and update my store:
matches:{{id:1, away_result:0, **home_result:1**, ...}}
But I dont know how to pass it correctly because at my homeScoreChangedHandler I dont have acess to the "this.props.game" property.
Does anyone have any idea on how to deal with this?

You can pass the value to your onchange method.
Something like:
<TextField value={this.props.game.home_result}
onChange={(event) => {this.homeScoreChangedHandler(event)}} />
//method to trigger action creator
homeScoreChangedHandler(event.target.value){
this.props.nameofActionCreator(event.target.value)
this.methodToUpdateTextField(event.target.value)
}
You would need to update the component with the new props. You can use the react lifecycle method 'componentWillReceiveProps' or by using a callback method and set the component state to from the redux store (via reference to this.props.storeObject that you would set up in your mapStateToProps section). Your biggest issue is going to be avoiding async issues where the store doesn't update fast enough for your data to update.
So I would do some conditional rendering/ use a Promise to control rendering.
In pseudo code:
if (this.state.userInput != this.props.game.home_result){
update the react state to the props and render the new data }
else { don't update and just return the current state}

What is the diff b/w this.name and this.state.name in react?

React has instance property and state property in react in constructor.
Instance property - Its not re-render the view. use to store the value.
State property - Its store and re-render the view.
Apart from above any other reason or difference or when should be use for both instance and state in constructor of React class component?.
Example:
class example extends Component{
constructor(){
this.state = {
name: 'albert'
};
this.name = 'albert';
}
}

When component state changes, it triggers component re-rendering (if it's not set to be ignored in shouldComponentUpdate()).
Changing instance property does not trigger re-rendering.

simple difference for both that is view part rendering.
EX: When State is update the view also update. Sometimes view is need not to reload that time we can store the value in component instance as you mentioned this.name.
Just check with below link to more about state and instance
https://medium.freecodecamp.org/where-do-i-belong-a-guide-to-saving-react-component-data-in-state-store-static-and-this-c49b335e2a00

It depends upon your requirement, which kind of data you are storing within it.
When any state variable is updated, react calls render to make changes in DOM element, so if you want to make any changes in DOM you should use state otherwise instance.
The current best practice is to use local state to handle the state of
your user interface (UI) state rather than data.
from this article
and instance properties when you just want to save some data to use in UI handling, calculations etc.
check this ref react-components-elements-and-instances for futher details

Whenever state is updated, react calls the render() method to update the DOM with required changes, and it should always be updated using setState(). The instance variable will be useful for block level manipulations which would then update the state if required. So if you want to re-render the DOM use state variables, else use instance variables.

One-Way Data Flow: Child component doesn't update when prop is asynchronously updated by parent

All props form a one-way-down binding between the child property and
the parent one: when the parent property updates, it will flow down to
the child, but not the other way around. This prevents child
components from accidentally mutating the parent’s state, which can
make your app’s data flow harder to reason about. In addition, every
time the parent component is updated, all props in the child component
will be refreshed with the latest value. - One-Way Data Flow
The Vue2 Component Docs suggests doing the following to use props as an initial value:
// via https://v2.vuejs.org/v2/guide/components.html#One-Way-Data-Flow
props: ['initialCounter'],
data: function () {
return { counter: this.initialCounter }
}
So in my code I mimicked those instructions here.
However data() in Note.vue isn't being updated even though the prop value is received according to vue-devtools.
Haven't had success setting the values with the mounted or created lifescyle methods.
When I use static data, this seems to work fine, how can I ensure the child component reacts to receiving props when it comes from a remote source?

When you are passing initialNote as prop for initial value, but I see initialNote is being populated asynchronously in getNote method, so it will not be present initially when the component will be mounted. It will be populated after some time by the time initialisation would have already happened.
In the example give in vue documentation, initialCounter is static value which will perfect as it will have same value from beginning.

Does React Flux library Alt use React's state?

After completing the guide on the Alt site I am confused if Alt uses Reacts state to set properties? In part 3 - using Stores, it says
Instance variables defined anywhere in the store will become the
state.
It then puts a variable in the store:
this.locations = [];
Yet if I go into the main React component and log the state, after locations is given data of course, I get undefined except on the props?
loggState() {
console.log(this.state); // undefined
console.log(this.locations); // undefined
console.log(this.props.locations); // [object][object]..
}
Can anyone explain the relationship between states and props when using Alt?

In Alt—and indeed most Flux implementations—the store is a totally different part of your application to your components.
A component subscribes to changes in a store, then uses the changed data to update its local state, causing it to re-render.
We derive the initial state of components that use the LocationStore from whatever the store's state is when we instantiate the component.
getInitialState() {
return LocationStore.getState();
},
Then we set up a subscription, listening for changes to the store.
componentDidMount() {
LocationStore.listen(this.onChange);
},
And finally, we use the subscription handler to apply these changes to the component's local state. The way you decide to apply each update is totally up to you.
onChange(state) {
this.setState(state);
},
Each time we call this.setState with a new state, the component will re-render.
You could also use a higher-order component to subscribe to the store, then covert the store's state to props and pass them down to a wrapped component, instead. In which case, your component wouldn't need to be stateful at all.