goatslacker / alt

Isomorphic flux implementation
http://alt.js.org/
3.45k stars 323 forks source link

AltIso decorator: Isomorphic Rendering in nested components #611

Open vincentschroeder opened 8 years ago

vincentschroeder commented 8 years ago

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;