I'm developing a react.js project and before the main component is rendered, I call a function that returns an object that all components should be able to access. What is the correct way of doing this in react? Currently, I'm just passing it as a prop to the main component and then I suppose I should have to remember to pass it as a prop to all other components. Is there an easier or better way of doing this?
It seems like you are doing something like Redux. Passing the object as props should be okay. You could make a higher-order component that wraps your components and adds access to that global object via props. This is similar to Redux's connect.
As the expectation in React is application-wide concerns ,like a flux/redux/apollo store, are kept in a root provider component’s context and then accessed elsewhere in the component tree via a Higher Order Component or render props. This provides relief from globals and circular dependencies, and makes testing those components easier.
However, if you have non-component code that will need access to configuration values, you may need to use config global and writing components in a way that accepts config values from props.
see: https://github.com/lorenwest/node-config
Related
I am a beginner and I am learning React JS. I am making a demo project. I need a help there.
In my app.js there is routes shop.js and review.js. The data and states is in shop.js. Now how can I pass some states data on review.js from shop.js?
Image
How can I do that?
It's recommended to lift the shared state up to their closest common ancestor (app.js).
please check
https://reactjs.org/docs/lifting-state-up.html
You could use Context
Context provides a way to pass data through the component tree without having to pass props down manually at every level.
In a typical React application, data is passed top-down (parent to child) via props, but such usage can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree.
In a react component hierarchy one can pass data from the root component to some component inside component tree by passing props. But what is the optimum way of passing data up the hierarchy? I can think of passing methods from the wrapper to the child. Is there any better way of handling data flow in a deep nested components scenario?
I don't think there is something wrong with passing callback functions from parent to child component.
But, in this case:
<parent onSomeEvent={..}>
<first-child onSomeEvent={..}>
<second-child onSomeEvent={..}>
...
When need to pass some data from child component to higher level parent, and you don't want to pass the callback function like above example you may use state management like react-redux, MobX. You can also use react context api and hooks if you don't want to use additional library.
You just have to keep in mind it isn't overkill for your app.
As i understand it, they both deal with state. Hooks seem to be more internal to a components state, while the context api seems to solve the problem of prop drilling, creating a more global state? Is this false? What am I missing?
Thanks a lot!
As I understand, they have completely different use cases. Context allows you pass a value deep into the component tree, where the value could be any kind of prop, say, a color. By using context in this way, you avoid having to do props.theme on every component that needs a theme color passed to it.
Hooks, on the other hand, replace the need for classes; instead you create a function and useState enables you to pass in variables. I.e. Hooks allow you to take a React function component and add state to it, and apply lifecycle methods like componentDidMount and componentDidUpdate. This is useful because if you find your function requires state, you don't need to refactor it into a class, you can just add Hooks. :) Of course this choice is contentious among developers though.
Generally, when I have a variable that several child components should be able to access, I store them in the data object of my root Vue element and subsequently pass them down to child components through properties.
However, I've recently progressed to using vue-router and my root vue element only contains a "router-view" component, which controls what child component is being served to the user.
Below is what my root element looks like (I am using vue-cli):
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style lang="scss">
</style>
As a result, the approach of passing variables to child components through properties, which I used prior to using vue router, doesn't seem viable anymore.
How should I be passing data from my root Vue element to my child components through vue router? Should I even be using this approach to achieve my goal of accessing "global" variables?
I've read several threads that reference using Vuex for state management and while I'm unopposed to learning and using it - it feels a little overkill for what I'm trying to achieve at this stage.
EDIT (clarifying question)
Several of my child components make API calls to a local / production server (depending on the node environment) and I find myself copying the “if-else” logic multiple times to determine which server the component should be making the API call to. So I thought it would be a much better approach of declaring a “server” variable at the root element and then pass it down to the child elements that need to make API calls
Vuex is a great tool, however, if you're trying to pass some basic data - such as a record id - to a child component, you should be looking at route props.
https://router.vuejs.org/en/essentials/passing-props.html
With route route props, you declare props in your child components in the normal fashion. However, the must be named the same are the route property.
// child component
props: ['id']
// route definition
{ path: '/item/:id', component: Item, props: true },
As you can see the :id is then passed to the child component id prop.
As your application grows in it's complexity, vuex (or a state manager of your choosing) would be a much more appropriate tool to use. When you become comfortable with it and learn some of the really nice tricks, you'll see what you've been missing :).
In my page, I have a set of components and subcomponents like that:
<TournamentTabs :tournament="{{ json_encode($tournament) }}">
<TournamentTab>
<TournamentTabGeneral></TournamentTabGeneral>
<TournamentTabVenue></TournamentTabVenue>
etc.
</TournamentTab>
</TournamentTabs>
Right now, I use Laravel for getting $tournament value.
Now, I would like prop tournament to be available to all TournamentTabs children, but when accessing this.tournament, I get undefined
How should I access tournament value in all chidlren???
There are many ways to do it.
Firstly, the TournamentTabs is not a root component as I can see. Root component - it's the component where Vue instance mounts (in most cases div#app) that can be accessible via this.$root anywhere.
You can access it via this.$parent.tournament, but this is not a best way to do it, because you will end up like this.$parent.$parent.$parent....tournament if you need to access property from deeply nested components.
You can try vuex library to implement the central application storage.