goatslacker / goatslacker/alt

AltIso decorator: Isomorphic Rendering in nested components

Open
#611 0 comments 0 reactions 0 assignees View on GitHub

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.