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

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.

Related

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.

Should I make all API calls with redux, or should I keep them simply in components? [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 2 years ago.
Improve this question
I am new at using react/redux. I just started working on a react project, but I don't really know which one do I choose when when it comes to making API calls. Should I do all of API calls with redux or are there cases in which I can handle them using components?
Choosing either one has its own merit. If you want the data from API in global state or for any further use you may need to choose to do your calls in redux.
If the interaction is very less and data is not used any further you can opt to do calls in component
Based on the documentation of redux the best practice would be to make you API calls directly in the "actions" of Redux.
You'll be able to find more information on this page: https://redux.js.org/advanced/async-actions
There is also another thread with a really good answer on how to make a proper API call with Redux:
How to properly make REST calls from ReactJS + Redux application?

In React, how to create a GitHub like navigation system? [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
When you navigate on GitHub, it like the whole next page is preloaded inside the current page, and then navigate.
So is there a way to render a component in background ? And then insert it in the DOM ? Some component need to fetch some data,
I would like it to be done in background too.
I'm using react-router-dom and relay for data fetching.
Thanks
It can be achieved with the Transitions concurrent UI pattern:
wait for some content to load before transitioning to the new screen
But the React Concurrent Mode is quite a complicated topic, still an experimental feature at the time of writing, it needs a special setup before you can start using <Suspense /> and useTransition Hook - please read the updated documentation.

How to listen for changes with react and firebase? [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
I have two separate projects one is a react application and the other one is for my firestore API that I have functions setup. I call these functions in my react application. I have them separated since the firebase package is very large.
I am looking to figure out how to have my data in real time. I know how to setup snapshots in my functions. So I am wondering if I could setup a function that pings my react application(that could be listener for) that something has updated.
Check out https://github.com/tylermcginnis/re-base - it allows you to persist your data in the React State mirroring any changes that are made in your database. It was made specifically for Firebase + React.js.
There are endpoints (amongst many others) namely syncState which is a two-way bind to state and bindToState which is a one-way bind to state.
Hope this helps!

Fetching data from database(React.js) [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 5 years ago.
Improve this question
In my app, some components use different categories of data(clothes, shoes etc.).
Is it better to fetch data from database once and put it to storage? Or i should let every single component fetch data directly from database?
You're looking for Redux (an implementation of flux). Redux gives you a global state to work with that you can connect components into. You can make an api call in one component, and if added to state (using actions + reducers), you can update data from a completely different component. They don't even need a parent/child relationship in your component hierarchy.
So yes, you're looking for "storage", in the form of a global state for your entire React app.

Resources