Maintain selected tab after page reload in React/Redux [closed] - reactjs

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 3 years ago.
Improve this question
I have a page with a tab component, with 5 tabs in it.
What would be the best way to maintain the state of which tab was selected after a page reload/refresh in React/Redux?
I can think of two ways to persist this:
Query parameters
Local storage
Are these okay to use or is there a better/more React way to do this?

Let me first say that it's a highly opinionated question and depends on your design and needs.
I would use query parameters if the current tab is an important information on reload, since it could also be a link shared, opened in another browser...
I usually use local storage to store internal state about the application (such as login, show a popup on an element the first time its seen to explain what it does, etc...), not if a tab has been selected or not, since it's quite a versatile information. The user might for example get to the page from another page, later, and still get the second tab open instead of the default one.

Related

What is the best way to store data for Next.js websites? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 3 days ago.
Improve this question
I'm currently building a website in Next.js and I've gotten to the Blog page which got me thinking about how to handle this page but also whether or not I should approach the rest of the pages differently too. I am just hard-coding all the content (text and images) and I was wondering if there is a better/smarter way to do this? Or should I keep going like this and also hardcode blog posts into my website.
I'm not that experienced so I wouldn't really know how this affects performance or other aspects.
Better or smarter way is very subjective in my opinion. But I will give you some options:
Hardcode it just like the way you do right now. It won't affect performance but you will have to write the code, push it to some version control (if you use one), trigger the build, and make sure it works.
Use Markdown file for every post and have next.js automatically build routes of it. See this tutorial if you wanna take a look. The pros are it's simple (doesn't need a database), and you don't have to write the entire code -- just write the content in a markdown syntax. But you still need to push your changes and trigger the build.
Use headless CMS like Strapi, etc. Personally this is the most convenience way. Write your content, click that Save button, and you're done. But it needs more setup then the other options.
Create your own backend and database setup.
Hope it helps.

Should I pass data to the component or make a request to the API in React? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 1 year ago.
Improve this question
I'm currently developing a side-project and trying to learn some general API things.
The user can access a list of projects by going to /projects and I'll get
all of the projects as a list. The user can also click an Edit button that goes to
edit/{project_id} and was wondering whether I should pass the project object to the component or just do a separate request to the API with the ID of the project to only get that project.
The first one is good because it's easier and also, I won't have to send all information about the project objects because I can't show all of them in the table (in /project) and this will save some data (ex. the list will show name of project and created date only). However, the second way is good because there will be less requests to the server.
My question here is, what is the preferred way?
Sidenote: I've tried searching for a question like this but didn't know how to phrase it, so this might be a duplicate.
In this situation, I would advocate for the separate API request. With a list of projects, you really don't want to include everything in your "get all" API call; just enough basic stuff to populate the list. That will make your queries faster and data transfers smaller, which is especially helpful when a large number of projects come into play. However, when you "deep dive" into a single project, then you'll want everything about that single project.

Multiple tabs application with react [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
Good afternoon, I need a service desk type application with the ability to open tickets in different tabs. 1st way - We can use split screen in one browser tab, i.e. on the left there will be a list of tickets, and on the right there will be tickets opened by clicking from the list, and each click opens a new tab with a ticket. Or 2nd way - we can use browser tabs and open a new browser tab each time.
The historicity of the transitions within the tabs should also be maintained, since each ticket can be linked to others and we must be able to navigate between them in each separate tab.
What is the best way to implement this?
You can use a design system (or be inspired by) to implement de tab UI: Semantic UI, Material UI, and many others. And integrate this with React-router that can gives you the history.

How to populate list from api and pass data to new page when item is clicked?(react native) [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I am very new to react native and am trying to populate a list with an image and a heading using a fetch() call from a web service . I need this list to populate as soon as the page is displayed. I am struggling to find the right method/event to put my logic in .
Also i have a separate page to see the detailed article. Is there a clean way to pass on information to this page so i can avoid making another api call or a messy global variable.
You should read up on Redux. It might seem a bit hard to understand while reading but the implementation is pretty simple and straight forward.
Also, take a look at this article by Dan Abramov, the main contributor of Redux, talking about Presentational and Container components.

When to start loading data in VM [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
Let's say I have a page with two buttons and a content control. I also have a View-Model defined for this page. When I press each button a specific view-model is bound to a content control, so buttons are used to switch between views. The problem is, when view is switched some data needs to be downloaded (doesn't matter from where, it could be a database) via a view-model - and I don't really have an idea where to put code responsible for that (i.e., code that starts downloading data). Is constructor a good place for it?
Usually the ViewModels have a specific method (mostly called Init), that performs data initialization. Constructor should not be used for these purposes, because it should just construct the object, nothing else. Moreover - you will probably want to perform data loading asynchronously, so constructor is again not very well suited for this.
The Init method should be called just when the navigation is performed, so you can pass your navigation parameters to it.

Resources