React / Redux - Get Details from Url ID

Question

Im making a portfolio.

I have a list of works in my http://localhost:8080/works

When i click "Know more" button, i want to go to a different url that shows me more info about that particular work.

For that i think i need to get the ID from the url.

Im trying to use AXIOS to make a get request but its not working...So i decided to start again.

Could some one help me ?

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

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>
);

Once again the objective is when i click the work or in the Know more Button, i want to go to the single page based on the ID.

I want to show the info of that particular ID.

Thanks.

Answer 1

You need to connect TrabalhosShow similar to Trabalhos. Note that you can also access the passed props in mapStateToProps, so no need to connect to the whole state:

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

export default connect(mapStateToProps)(TrabalhosShow);

The entity will be passed to your component in the prop data, e.g. this.props.data.title will return the title.