BlogApp7 StreamShow

0.앱 구조

blog-app

• api

  • db.json

• client

  • public

    • index.html

    • modal.html

  • src

    • actions

      • index.js

      • types.js

    • apis

      • streams.js

    • components

      • StreamCreate.js

      • StreamDelete.js

      • StreamEdit.js

      • StreamForm.js

      • StreamList.js

    • App.js

    • GoogleAuth.js

    • Header.js

    • Modal.js

  • reducers

    • authReducer.js

    • index.js

    • streamReducer.js

  • history.js

  • index.js

1.src/components/App.js

import React from "react";
import { Router, Route, Switch } from "react-router-dom";

import Header from "./Header";
import StreamCreate from "./streams/StreamCreate";
import StreamEdit from "./streams/StreamEdit";
import StreamDelete from "./streams/StreamDelete";
import StreamList from "./streams/StreamList";
import StreamShow from "./streams/StreamShow";
import history from "../history";

class App extends React.Component {
  render() {
    return (
      <div className="ui container">
        <Router history={history}>
          <div>
            <Header />
            <Switch>
              <Route path="/" exact component={StreamList} />
              <Route path="/streams/new" exact component={StreamCreate} />
              <Route path="/streams/edit/:id" exact component={StreamEdit} />
              <Route
                path="/streams/delete/:id"
                exact
                component={StreamDelete}
              />
              <Route path="/streams/:id" exact component={StreamShow} />
            </Switch>
          </div>
        </Router>
      </div>
    );
  }
}

export default App;

 

2.src/components/streams/StreamShow.js

import React from "react";
import { connect } from "react-redux";
import { fetchStream } from "../../actions";

class StreamShow extends React.Component {
  componentDidMount() {
    this.props.fetchStream(this.props.match.params.id);
  }

  render() {
    if (!this.props.stream) {
      return <div>Loading...</div>;
    }

    const { title, description } = this.props.stream;

    return (
      <div>
        <h1>{title}</h1>
        <h5>{description}</h5>
      </div>
    );
  }
}

const mapStateToProps = (state, ownProps) => {
  return { stream: state.streams[ownProps.match.params.id] };
};

export default connect(mapStateToProps, { fetchStream })(StreamShow);