Im trying to understand redux while designing a sample App. Im confused with the concept of state vs data model.
Note: Im not using Reactjs.
Background of the Sample App.
2 tabular grids:
Grid A: List of members on my website.
Grid B: List of all orders by a member, selected in Grid A.
So the end-user of this app, can select only 1 member at a time from Grid A at a time.
The end user can also enter name of user in Grid A and my backend service will return the details for this member (for grid A) & all their past orders(Grid B).
Redux Questions
My backend service knows nothing about the order in which I list items in Grid A or B. Who should maintain order of items in the Grid? Is it responsibility of the store or the component?
Who maintains which member is clicked in Grid A? ? My backend service, returns me all the members and all their orders. It knowns nothing about the member that is selected on the UI.
Is it good practice, to have components keep this information and then augment the UI, whenever it refreshes from the data it gets from the store?
Redux is made to save your current app state. But how to show it is up to your components.
Actually it depends on an app. There are apps with a lot of similar tables and there are component libraries where sorting logic is handled inside the component. But if all your app is based on a few tables it makes sense to add to the store a property that indicates how your table should be sorted, something like: membersSortingType: [asc, desc, none]. And then you pass members and membersSortingType to a function which does the sorting and returns a new membersList which then can be passed to your component.
The same is here, when you click an item you can save it to the store like: currentMember: id, and to get data that should be rendered in your component you just pass your member id and all the orders to a function that will do some filtering. So any time you select a new member everything is automatically updated.
Related
I have an application that is simplified into 4 Vue components:
TextbookSelection
TextbookView
ChapterView
Textbook Header
In my TextbookSelection component, I make an API call to retrieve all my available textbooks from my database. I then populate the front end with the data and dynamically create router links that will take the user to the next vue component, TextbookView if they click on one of them. I pass in a textbook data object as a prop that contains info about this textbook so that the TextbookView component can use it to populate instead of calling for the textbook data again.
In my TextbookSelection.vue, these router-links are created.
<router-link
:to="{
name: 'TextbookView',
params: { textbook: textbook},
}"
In my TextbookView, I have props: ["textbook"] written. I also have a TextbookHeader component in there that displays all the info about the selected textbook, so I pass in the textbook data in as a prop to the TextbookHeadercomponent as well. I have this as a separate vue component because I want the header to persist as the user goes further into the textbook, such as the ChapterView component. So as you can see, I am taking the same textbook data object I received from my first component (TextbookSelection) and passing it into every component if the user goes deeper into the textbook.
This works on the first pass; the user can select a textbook and it displays all the correct textbook information in the header. But then problem arises when the user hits "back" in their browser, or if they refresh the page. Suddenly, the header disappears because the prop data (Textbook data object) is now missing.
Error in render: "TypeError: Cannot read property 'id' of undefined"
found in
---> <TextbookHeaderView> at src/components/TextbookHeader.vue
<ChapterView> at src/components/ChapterView.vue
<App> at src/App.vue
How should I approach this problem? I don't know if what I'm doing is the correct way or not, but basically what I'd like is:
Have a header vue component
Have textbook data be persisted (user can go back and forth/refresh and the header will still have correct info)
Not have to constantly pull in data whenever the header component is created
I would recommend you use VueX for state management.
You could have an action that fetches your data from the database upon the creation of your home component and then update the store according to the fetched data.
This allows all your components to have access to your data that is persisted through routing.
Your TextbookHeader and all other components then have a single source of truth (the Store) and you don't have to re-fetch data (which you shouldn't anyway).
For more information on Vuex, please visit the official documentation
Say we have a CountryPicker which on mount will send a request to server to load country list then display it, user can pick a country and it will dispatch a PICK_COUNTRY action and update UI correspondingly. Also it will display some helpful information when it fails to load country list. The logic of this component is rather complete and standalone.
Many of our pages use this CountryPicker and apparently we want to reuse the code.
Based on the situation, we have a CountryPicker React component, a CountryReducer and CountryActions.
The problem is, some of our pages using CountryPicker would like to do some thing more (like retrieve new data according to new country) when user picks a different country.
The solution I can think of is add a handleSelectCountry props for CountryPicker, and call it with new country payload when user picks a country.
This is kind of ugly to me, is there anyway to do it more unanimously? Thanks in advance.
You could use Store.subscribe to watch for changes in the state of the component and trigger actions from there.
http://rackt.org/redux/docs/api/Store.html#subscribe
I need to update data every minute and on some specific events.
My idea is to create an action in ApplicationRoute, that would find the current router and evoke the model() method again.
But how can I access other routes from ApplicationRoute?
Maybe there are any other ideas to make it?
You don't have to reenvoke the model hook.
The matter is that most store data retrieval methods, for example, store.findAll() (ex store.find()) return live arrays. A live array will automatically update its content whenever new records appear in the store or existing records are removed.
So all you need is to repopulate the store.
A good place to periodically fetch the data is a service.
Also, you can enable/disable periodic data retrieval from within routes. Simply create a mixin that would enable data retrieval in the service when the route is visited and disable when the route is left.
I am working on an application with Ember + Ember Data.
I have a model "Tax" with a collection of "Sub-Regions".
I also created a list of tax objects, with an Edit button. When a user goes to edit, I have created a form, that has fields for the properties of Tax, as well as a list of Subregions with a text input field to modify the default tax rate for the subregion. What I would like to do is to be able to save in one action the object Tax and all the items of the sub-collection. I'm stuck creating that action, not sure how to approach that problem.
I've put a sample here: http://emberjs.jsbin.com/jinovi/6/
I come from a back-end background and I know how I would solve it using MVC with page refresh, but not sure how to do it in Ember.
I've noticed that it gets all saved locally because I'm using Fixtures, I guess that if I use the REST adapter it will work in the server too.
I've put a sample here: http://jsbin.com/jinovi/8/
This is the first time i am using REST for any web applications.
For normal get an post and i simply call the API done in Django Rest Framework.
But i am not able to think how can i deal with situations where something more needs to be done.
Suppose I have
List of users in database and their product they have bought.
Now i have web form where if someone adds the user and then submit the button , then
I have to get the list of items bought by that user in 5 hour window
Update the row in database which says buy_succeessful to false
Then again get the list of orders from the items he has bought and then update the rows with order_successful to false
Now current in my submit actions i am doing like
call to api to add the user in override manual enrty table. This is simple post to that table
Then after getting the sucessful tehn i again call api to list of items this user has bought using Query parameters . Then i have the list
Then again i loop through the list and post to api for updating that record in datbase
and so on
I am feeling this is not right.
I have found that quite often there are some more things to do tahn just saving individual objects in database.
whats the best way to do that. DO i need to have view api for every function
Try the 3rd step of the DRF Tutorial:
http://www.django-rest-framework.org/tutorial/3-class-based-views
Here, it shows how to do a "PUT" request for updating data. And also some of the other DRF features.
Also, you can reference serializer.object which is the object instance of the django model record that you are saving to the database. This question here talks about adding extra attributes, etc... before saving to the database:
Editing django-rest-framework serializer object before save
You can also access the record post_save and there are other hooks in the framework that you can use.