On click of button in reactjs i want to increment one variable named counter and this increment happens through server side.
Once response comes from express server I want to set returned value in different react component.
How do two different react components communicate in such scenario.
I am using commonJs approach for each components so each component is in different file .
How can I achieve this functionality?
It is like clicking on button adds item to cart for which communication to server is required.
Basically it seems you need a modeln I see three possibilities:
Write a model manually inside a specific file/module, update it when the server send the information and bind it to your views with EventEmitter
https://github.com/Olical/EventEmitter
You could use backbone so you can have models,collections and native events on update/change...etc http://backbonejs.org/
Implement the Flux pattern for reactjs : https://facebook.github.io/react/docs/flux-overview.html
Depending on your needs you can choose one of them.
Related
I was hoping I could get some feedback on something I'm working on. I'm building an application that is essentially a bunch of data tables. Part of my requirement is not to use any additional frameworks (vuetify) or any type of store (vuex).
Currently, my application is constructed as follows:
API call upon creation of app
That data get's passed into a component where I would like to do all my searching/filtering
From there the next component is built specifically for Pagination
Then to the component that builds the data tables.
My question is, since I have this top down approach, how do I build both the search and filter functionality to where I don't have to pass anything back up to the parent components?
I am using scoped slots to pass/inject data into child components. My first thought was that I would have a computed property that returns an array in the control component and then pass that down to the pagination component, which works, but how do I also use that same array if I want to be able to filter results and also search filtered and none filtered items? Essentially to be able to mock the functionality of some of the Vuetify tables.
I assume you don't want to pass data/prop-drill between 3 component layers?
You can use provide/inject.
You can provide a "setArrayData" method to the child components (2 and 3 levels deep) and also provide "arrayData" data property.
You can also an event bus (see vue docs). In Vue 2 an event bus is built in, in Vue 3 it's not.
based on the following VueSchool tuto https://vueschool.io/courses/vue-router-for-everyone I'm trying to create a Vue app with a menu based on a list of applications found in an October server. I try to replace the static destinations[] by an applications[] filled from the database.
For that I use Axios and Vuex. I'm able to query the data, but I spent many hours trying to get it at the application loading, to create the menu, before the application is displayed...
I have a main.js an App.vue and a MenuApp.vue component for displaying the menu.
My problem is that my getter is always called before my mutation and that my application array is always empty when the menu is creating.
Is there a way to load and init properly all data before displaying my vue.js menu component ???
Or could I reload my menu component after the mutation ?
Thanks for help ;-)
You could use a "loading" layout, before load the main layout.
From "loading" layout, use async to load the applications list and all data you want to get before. At the end, just switch to main layout with applications list loaded.
From OctoberCMS side, I don't know how you are made the requests. But, try to use simple routes, calling router controllers, instead of using components. This will made a more direct request, and a better performance on your final project.
I am building an app with 2 tabs (react-navigation). I am new to react and redux and I am still trying to wrap my head around how to communicate between components without creating too many unnecessary dependencies.
Tab A: The main component is fetching data via a remote API. For this I am using a react-redux and redux-thunk. The data is kept inside the central store since it is used for button states across different components (Tab A and Tab B). Pressing a button is calling a Thunk that deals with the asynchronous API call to update the server and then dispatches the action to update the store.
Tab B: Also fetches its data via a remote API but sets it via the component's State. I did not see the point of also putting this into the redux store since it is not shared across components. The button component from Tab A is also used here.
What I am trying to achieve: When the state inside the redux store changes (button's onPress() dispatches an action) both Tab A and Tab B require to re-fetch via the remote API but only under the following circumstances:
Switching from one tab to the other requires a re-fetch inside the target tab. Then, only when switching back to the first tab it should also trigger a re-fetch.
What I considered:
Adding a tabAinvalidated and tabBinvalidated flag to the redux store. I then listen to the willFocus event inside both tabs. I then re-fetch if the respective tab is flagged as invalidated. This might work but I am not sure if it is considered an anti-patter to keep update flags for individual components inside the redux store.
Q: Is there a better approach to this? What is the best way in react native to inform components that they need to reload their data from a remote API?
I think I came up with a solution myself. Instead of using the boolean flags for each tab (tabAinvalidated, tabBinvalidated) I am now just recording a timestamp for every update inside the redux store. For components which require re-fetching based on redux store updates I copy the redux timestamp into their own component's State each time I re-fetch the data. This way I can check if the component needs to re-fetch its own data from the server.
setFocus = async() => {
if (this.props.updateTs > this.state.updateTs) {
await this.loadData()
this.setState({ updateTs: this.props.updateTs, })
}
}
Seems to work fine.
So my first screen, say ParentScreen has a FlatList of a component. When any component of the list is clicked, it opens another screen ChildScreen. Now what I'm trying to do is that when I perform an action on the ChildScreen, the ParentScreen's FlatList needs to be updated.
I'm using react-native-navigation, so my current approach is to send props via passProps property via this.props.navigator.push() but when I perform an action on the ChildScreen, it's unable to update that data because the ParentScreen is frozen at that time, hence it gives me the error:
You attempted to set the key count with the value 3 on an object
that is meant to be immutable and has been frozen.
How can I communicate this data OR do a workaround to allow the same.
You need to read about react-redux, with that you can manage your states and pass data from one componet to the other by mapping states to props, you will learn about reducers, combine reducers and actions.
this youtube link can help you alot https://www.youtube.com/watch?v=ucd5x3Ka3gw
In an angular5 application, I have various sections of my page layout that I would like to control through an angular service. For example, I have a sidenav component that displays when a value is set to open, and I would like to be able to toggle it from any component I'd like.
My initial thought was that it would be nice if I could bind the open value to a variable in a LayoutService I would create, and the LayoutService would contain a toggle() method that would toggle the value and cause the sidenav to open/close. I could then inject my LayoutService into any component I'd like and control various parts of my layout.
Any idea whether this is possible and how I could go about doing this? I thought it might be possible using an EventEmitter or something, but I was wondering whether there was a simpler way and I'd rather not use redux.
https://stackblitz.com/edit/angular-lj7gsz
Here's a side-bar you can open and close using simple rxjs objects.
In the side-bar service, I've created a BehaviorSubject that you can pass boolean values to and I also exposed an Observable, which will emit every time a new value is passed to that subject.
By subscribing to that observable (I've used the async pipe to subscribe for me), my side-bar component will know when other components wish to open or close the side-bar. All the other components need to do is inject the service and call the service's open or close methods.
It's not perfect, but I feel it's definitely better than using event emitters as they were never made to be used in services.
Hopefully this is helpful.