React / Redux - 从 Url ID 获取详细信息

Question

我正在制作作品集。

我的http://localhost:8080/works有一个作品列表

当我点击“了解更多”按钮时，我想转到一个不同的网址，向我显示有关该特定工作的更多信息。

为此，我认为我需要从 url 获取 ID。

我正在尝试使用 AXIOS 发出获取请求，但它不起作用......所以我决定重新开始。

有人可以帮我吗？

actions/index.js

export function workFetch(id) {

    return {
        type: 'WORK_FETCH',
        payload: request
    };

}

containers/trabalhos.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Link } from 'react-router';


class Trabalhos extends Component {


renderList(){

    return this.props.trabalhos.map((trabalho) => {
        return(

            <li key={trabalho.id}>                 
                    <img src={trabalho.img} />
                    <p className="trabalho_titulo">{trabalho.title}</p>
                    <p className="trabalho_desc">{trabalho.descricao}</p>
                <Link to={"trabalhos/" + trabalho.id}>    
                    <a className="trabalho_saber_mais">Saber Mais</a>
                </Link>
            </li>

        );
    });
}


render(){

    return (

        <div>
            <div className="trabalhos">
                <div className="trabalhos_caixa">
                    <div className="row">
                        <div className="col-xs-12">
                            <ul className="no_pad">
                                {this.renderList()}
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    );
}
}


function mapStateToProps(state){

    return {

        trabalhos: state.trabalho

    };
}



export default connect(mapStateToProps)(Trabalhos);

containers/trabalhos_show.js

import React, { Component } from 'react';
import { connect } from 'react-redux';

class TrabalhosShow extends Component {

    render(){
        return (

            <div>

                <li>Show post: {this.props.params.id}</li>
                <li>Descrição: {this.props.params.descricao}</li>

            </div>

            )
    }

}

function mapStateToProps(state, props) {
  return {
    data: state.trabalho[props.params.id],
  };
}


export default connect(mapStateToProps)(TrabalhosShow);

减速器

reducers/index.js

import { combineReducers } from 'redux';
import TrabalhoPortofolio from './reducer_trabalhos';

const rootReducer = combineReducers({
    trabalho: TrabalhoPortofolio
});

export default rootReducer;

reducers/reducer_trabalhos.js

export default function() {

    return [

        { id: 1, title: 'Miristica', tec: "Wordpress-Woocommerce", descricao: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", img: 'http://feiraalternativa.pt/wp-content/uploads/2016/04/Miristica-Bio-Cosm%C3%A9tica.png'},
        { id: 2, title: 'Teste', tec: "Wordpress-Woocommerce", descricao: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", img: 'https://pbs.twimg.com/profile_images/766360293953802240/kt0hiSmv.jpg'},

    ];

}

routes.js

import React from 'react';
import { Route, IndexRoute } from 'react-router';

import App from './components/app';
import Index from './components/index';
import Trabalhos from './containers/trabalhos';
import TrabalhosShow from './containers/trabalhos_show';

export default (
<Route path="/" component={App}>
    <IndexRoute component={Index} />
    <Route path="trabalhos" component={Trabalhos}/>
    <Route path="trabalhos/:id" component={TrabalhosShow} />
</Route>
);

再次，目标是当我单击作品或在“了解更多”按钮中时，我想根据 ID 转到单个页面。

我想显示该特定 ID 的信息。

谢谢。

Answer 1

您需要连接TrabalhosShow，类似于Trabalhos。注意，你也可以access the passed props in mapStateToProps，所以不需要连接整个状态：

function mapStateToProps(state, props) {
  return {
    data: state.trabalho[props.params.id]
  };
}

export default connect(mapStateToProps)(TrabalhosShow);

实体将通过 data 属性传递给您的组件，例如this.props.data.title 将返回标题。