javascript - 如何访问 SPA 中的单个 View ？

Question

我有一个具有以下结构的 react-js 应用程序:

public
src
  components
    - Books.js
    - BookShow.js
  - App.css
  - App.js
  - index.js

在我的 package.json 中，我使用了以下节点模块:

{
  "name": "tester",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-scripts": "0.7.0"
  },
  "dependencies": {
    "bootstrap": "^3.3.7",
    "react": "^15.3.2",
    "react-bootstrap": "^0.30.6",
    "react-dom": "^15.3.2",
    "react-router": "^3.0.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

在我的主站点中，我基本上是在尝试创建一个单页应用程序，我们在其中列出来自 books.json 文件的书籍。我可以做到这一点，我可以很容易地在我的 Books.js 文件中列出书籍，其中包含以下内容:

import React from 'react';
import { Link } from 'react-router';
export default React.createClass({


    getInitialState: function() {
        return {
          books: []
        }
      },

      componentDidMount: function() {
        this.request = fetch('https://gist.githubusercontent.com/madwork/adfae25c174bb246c650/raw/db225e4b9c74e1865da1c9cd54cf87d3dee171a5/book.json')
          .then((request) => request.json())
          .then((data) => this.setState({
            books: data,
            isLoading: false
          }))
      },

      componentWillUnmount: function() {
        this.serverRequest.abort();
      },

      render: function() {
        return (
          <div className="container">
            <h1>Books</h1>
            {this.state.books.map(function(book) {
              return (
                <div key={book.id} className="book col-lg-4 col-md-4 col-sm-4">
                <Link
                    to={"/books/"+book.id}
                    className="list-group-item"
                    key={book.id}>
                    {book.name}
                    <img className="img-responsive" src={book.cover} />
                </Link>
                  <h3>{book.name}</h3>
                  <p>{book.author.name}</p>
                  <i className="glyphicon glyphicon-heart">{book.likes}</i>
                </div>
              );
            })}
          </div>

        )
      }

})

在我的主 App.js 文件和我的 index.js 文件中，我的路由设置如下:

App.js

import { Link } from 'react-router';
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {

  render() {

    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <ul>
            <li><Link activeStyle={{ color: 'red' }} to="/books">Books</Link></li>
        </ul>

        {this.props.children}

      </div>
    );
  }
}


export default App;

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import { render } from 'react-dom'
import { Router, Route, IndexRoute, browserHistory, hashHistory } from 'react-router'
import App from './App'
import Books from './components/Books'
import BookShow from './components/BookShow'
import './index.css'
import 'bootstrap/dist/css/bootstrap.css'



render((
  <Router history={hashHistory}>
    <Route path='/' component={App}>
      <Route path='/books' component={Books}>
        <Route path='/books/:id' component={BookShow}/>
      </Route>
    </Route>
  </Router>
), document.getElementById('root'))

我真正想做的是让用户能够从列表中点击书籍对象，并获得这本书及其所有数据的单一 View 。我已经按照我的逻辑设置了路线，但我想知道我在哪里错过了技巧。

任何人都可以帮我指出正确的地方，或者如果这一切都错了，同样对我大喊大叫 :)

标记

Answer 1

问题是，您的数据存在于 Books 组件中。而且您没有与组件无关的数据层。

它有不同的方法，比如 Redux，它将把你的所有数据保存在一个全局存储中。

另一种方法是构建您自己的数据层。它可以是一些简单的东西，比如一个由您的 api 方法填充的对象。因此，您的 api 方法可以在向您的后端发送请求之前查找缓存的项目。

实际上，选项是无限的。您也可以在每次有人访问 book/:id 页面并加载图书时调用您的后端。

因此，这取决于您要花费的知识、时间……和精力。每个解决方案都有自己的优点和缺点。

---

就个人而言，我会首先创建一个单独的 api 模块，它将执行 api 调用。并为数据使用一些全局存储。如果数据几乎是静态的，我会尝试先在本地找到这本书，如果不存在，则调用后端 -> 将其存储在本地 -> 将其返回给组件。

在某些情况下，使用 Redux 很不错，但在某些情况下，这是一种开销。但是，值得一试。