Question

来自角色背景，我将使用ui-router进行此操作，目前正在学习如何使用react.js和redux。这是我需要了解的关于react和redux的最后一件事。通过数据连接两个组件的方法是什么？基本上我想要的是当有人点击{article.title}作为链接时。它将转到文章组件，它将显示该数组的所有信息，如作者，文章等重要信息，如新闻网站。如何编码列表和文章部分，以便它们连接并通过路由将其连接到列表部分。希望这个问题足够清楚，可以理解。此外，文章部分还从我的后端获取数据，以便当前正在运行。

数据集

[{"_id":"58c71df9f7e4e47f1fe17eeb","article":"words words","author":"Jason","date":"1/2/2014","title":"my article","__v":0}, aka bunch more data]

列表组件

  import React from "react"
import { connect } from "react-redux"
import { Link } from 'react-router';

import { fetchArticle } from '../../actions/fashionActions';

@connect((store) => {
    return {

        articles: store.articles.articles,
    };
})
export default class FashionArticle extends React.Component {


    fetchArticle() {
        this.props.dispatch(fetchArticle())
    }

    render() {
        const { articles } = this.props;

        if (!articles.length) {
            return <button onClick={this.fetchArticle.bind(this)}>load Articles</button>
        }

        const mappedArticles = articles.map(article =>
<div>
    <Link to={`fashionArticle/${articles.id}`}>{articles.title}</Link>
</div>
        )

        return <div>
            <h1>List of Fashion Article</h1>
            <ul>{mappedArticles}</ul>
        </div>
    }
}

文章组件

import React from "react"
import { connect } from "react-redux"
import { Link } from 'react-router';

import { fetchArticle } from '../../actions/fashionActions';

export default class FashionArticle extends React.Component {


}

路由

<Router history={hashHistory}>
    <Route path="/" component={Layout}>
      <IndexRoute component={HomePage}></IndexRoute>
        <Route path="about" name="about" components={AboutPage}/>
        <Route path="fashionlist" name="fashionlist" components={FashionList} /> // the list of data
        <Route path="fashionarticle/:id" name="fashionarticle" components={FashionArticle}/> // what the click on the will go to
    </Route>
  </Router>

如何使用redux数据将反应应用程序路由到一起？

0 个答案: