last day (14 days later) » 

2:04 AM
-1
Q: How to route to dynamic URL in React based on user imput

Q LiuWhen I am on my URL localhost:3000/contracts/members I see something like this: QUESTION: How do I make it when I click on 1 of the rows like the 3rd one with Member ID 3564 I am taken to the URL localhost:3000/contracts/contract?id=3564? My Component class code that shows the table above look...

 
did you try dispatching the browserHistory.push?
 
how do you dispatch it? store.dispatch(what here?)
 
store.dispatch(browserHistory.push(newURL));
Do you need to fetch data based off of that id?
 
no I already have the data
 
are you using redux ? flux?
 
2:04 AM
redux. If I call store.dispatch(browserHistory.push(newURL)); don't I need to add an case to my reducer function to deal with it?
 
not necessarily, (you don't have to capture a dispatch with a constant every time, I dont do that for route updates) that dispatch will cause your reducers to run and then selectors. so assuming you are trying to select the data correctly off of the query then that should do it :)
Let me know what happens when you do that and I can try and help with the next part. Not sure what you want to do with it visually/data wise.. but you will need to pass down as a prop the selected id after grabbing it from the query
hey
 
I have the contract passing through my reducer and updating me STORE
 
ok
so you need to fix your routes
 
however on my component page Contract.jsx how do I access it there?
 
you have members and contract living under contracts right?
/contracts/members and /contracts/contract
 
2:06 AM
No they are not within each other but beside each other in routes.jsx
 
yea they are both a child of /contracts though?
 
export default (
<Route path='/' component={App}>
<Route path='members' onEnter={onEnterMemberContracts} component={
MemberContracts} />
// What do I do here to load the Contract component everytime a user
// hits /contract?id=3564 or a different id?
<Route path='contract' component={Contract} />
</Route>
);
/contracts is just a base path. Not an actual class
 
yea I get that. where is that in the route?
like you have path='/'
and then 'members'
 
not sure what you mean
I have /contracts/contract
 
which would be /members instead of /contracts/members
 
2:08 AM
and /contracts/members
 
just trying to understand what the setup is
 
okay
 
so like is the routes.jsx paste you showed the actual file with all routes?
 
Not all the routes
 
2:09 AM
just the important ones
 
i'll guess you ommitted the parent contracts then
so is your Contract component rendering now?
 
I don't have parent contract
ya Contracts component is rendering
 
its ok just nvm about that part
ok cool
 
Q: am I able to pass props in my routes.jsx?
 
you shouldn't need to.
 
2:11 AM
then how do I access the store's state in my /contracts/contract URL that loads my component class Contract.jsx?
 
so in your component you need to pull in the data
 
yes
 
componentDidUpdate(prevProps){
if(props query id !== prevProps query id ){
fetchDataFunc(props query id)
as a pseudo code exampel
 
where would I put this? sorry I don't understand
 
ok in your component
you have some react functions
one of them is componentDidUpdate
 
2:15 AM
ah
 
that fires when a render finishes
 
just like getInitialState() and render()?
 
yea
theres a lot more too
 
SIDENOTE: what other functions do I have and how do I learn about these? I had NO IDEA haha
 
you can use that one to determine if the query has changed and if it has call a function that will populate some data
You really should try and understand the frameworks you are using. React can be super useful if you understand it :)
 
2:17 AM
what is prevProps in componentDidUpdate(prevProps){
 
that link is the lifecycle of a component. it includes all of its functions and what they do
prevProps is the props that that component had before the last render.
so like lets say you have a prop called name
<Component name="John" />
or well <ParentComponent name={this.props.name} />
and this.props.name has a value of "John"
when you change the name prop to have a value of "Liu"
 
I think my problem is that my component MemberContracts.jsx has the data I want in Contract.jsx
 
componentDidUpdate will run
 
but MemberContracs.jsx is not a parent component of Contract.jsx
 
and prevProps.name = "John" but this.props.name = "Liu"
it doesn't need to be
 
2:22 AM
I added componentDidUpdate to my Contract component but when I go to /contracts/contract it didn't run
All I want to do is to access my store's state in my Component class Contract.jsx that isn't the parent or child of any other Component class. How can I do this?
 
in redux stores data is passed as props. I'm guessing you aren't passing the props because you are rendering this.props.children in App.jsx
 
ya
const App = React.createClass({
propTypes: {
children: oneOfType([
node,
arrayOf(node)
])
},

render: function() {
return (
<div>
{this.props.children}
</div>
);
}
});
 
ok
change that to this
render: function() {
const childrenWithProps = React.Children.map(this.props.children,
(child) => React.cloneElement(child, {...this.props}));
return <div>{childrenWithProps}</div>
 
why do I need to do all of this just to access my store in my other component class
In redux are you only able to access the store by passing it as a prop?
 
it is an anti pattern to do it
you can but its an anti pattern
meaning you shouldn't
 
2:31 AM
anti pattern to do pass data not as props?
 
well unless you connect your child component
where do you connect App?
 
ya I tried to put mapStateToProps and connect() in my Contract component but I only ever had the inital state of the Store
 
what are your selectors pulling in the connect?
 
I just read this: For communication between two components that don't have a parent-child relationship, you can set up your own global event system. Subscribe to events in componentDidMount(), unsubscribe in componentWillUnmount(), and call setState() when you receive an event. Flux pattern is one of the possible ways to arrange this.
 
yea. flux is a framework. redux is another
they are equivalents
different methods but the same idea
connect should connect the component.
and you should pass data down as props to it
 
2:54 AM
I made my Contract a child component because I think this is easier and got it working
thanks for the help
 
yep!
 

last day (14 days later) »