AltIso decorator: Isomorphic Rendering in nested components
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 3.4k
- Forks
- 312
- PR merge metrics
- No merged PRs in 30d
Description
I am using react-router with alt-iso decorators. With components on the first child it works really good but if I have nested routes and components the alt-iso decorator isn't working. Here is my code. Do you have any suggestions to solve this? Can't AltIso handle nested routes or components?
<Route component={Application}>
<Route path='/player/:playerId' component={Player}>
<Route path=':videoId' component={Video} />
</Route>
</Route>
@AltIso.define(
(props) => PlayerStore.fetchById(props.params.playerId)
)
class Player extends React.Component {
render() {
return(
<div>
{this.props.children}
</div>
);
}
}
This Component works, but the Store is not rendered server-side. If I put the route out of the Player route it's working. But I want to have it nested :(
@AltIso.define(
(props) => {
return VideoStore.fetchVideoById(props.params.videoId)
}
)
class Video extends React.Component {
render() {
<div>My Video</div>
}
}
import VideoActions from '../actions/VideoActions';
import apiConstants from '../constants/apiConstants';
const VideoSource = {
fetchVideoById: {
remote(state, videoId) {
return fetch(`${apiConstants.baseUrl}/videos/${videoId}`).then((response) => {
return response.json();
});
},
success: VideoActions.fetchVideoByIdSuccess,
error: VideoActions.fetchVideoByIdError
}
};
export default VideoSource;
import alt from '../services/Alt';
import VideoSource from '../sources/VideoSource';
import VideoActions from '../actions/VideoActions';
import {datasource, createStore} from 'alt-utils/lib/decorators';
@createStore(alt)
@datasource(VideoSource)
class VideoStore {
static displayName = 'VideoStore';
constructor() {
this.bindActions(VideoActions);
this.video = null;
}
onFetchVideoByIdSuccess(video) {
console.log('onFetchVideoByIdSuccess' + video);
return this.setState({
video: video
});
}
onFetchVideoByIdError() {
console.log('ERROR!!!')
return this.setState({
video: null
});
}
}
export default VideoStore;
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by tracing the nested react-router Route structure and the AltIso.define decorators shown for Player and Video, then compare how the first-level and nested components are handled during server-side rendering. Done means the nested Player and Video data are rendered server-side when using the shown route hierarchy.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- full-stack, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100