React-Redux - Toogle a button to show and hide details

Question

I'm making a portfolio and when I click the details button, I show the details about that specific work, what I want to do next is to hide de details when I don't want to see them anymore, for that o think I need to make my button a toggle button to hide and show the details.

I'm new to React and Redux, and I'm learning.

This is my GitHub Repository

https://github.com/hseleiro/PortBeta

You can start the server just making an npm start.

Once again the objective is to make a toggle button to hide and show de details, i stuck whit it and i cant go any further .

Could some one help me ?

This is my miristica.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { selectTrabalho } from '../../actions/index';
import TrabalhoMiristica from './detalhe_miristica';


class Miristica extends Component {

renderList(){

    return this.props.trabalho_m.map((trabalho) => {
        return (
            <li>
                <div className="row list-group">
                    <div className="col-md-4">
                        <img src={trabalho.img} />
                    </div>
                    <div className="col-md-8">
                        <h3>{trabalho.title}</h3>
                        <p>{trabalho.descricao}</p>
                        <button key={trabalho.id} onClick={() => this.props.selectTrabalho(trabalho)} type="button" className="btn btn-info">Detalhes</button>
                        <br/>
                        <br/>
                        <TrabalhoMiristica/>
                    </div>
                </div>
            </li>
        );
    })
}

render() {

return (

    <ul className="list-group col-ms-4"> 
        {this.renderList()}
    </ul>

   );

  }
}


function mapStateToProps(state) {

return {
    trabalho_m: state.trabalho_m
};
}

function mapDispatchToProps(dispatch) {

return bindActionCreators({ selectTrabalho: selectTrabalho }, dispatch)
}


export default connect(mapStateToProps, mapDispatchToProps)(Miristica);

This is my detail .js , the one i want to hide and show

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

class TrabalhoMiristica extends Component {
render() {
    if (!this.props.trabalho) {
        return <div></div>;
    }

    return (
        <div>
            <div>{this.props.trabalho.tec}</div>
        </div>
    );
    }
 }

function mapStateToProps(state){
return {
    trabalho: state.activeMiristica
};
}


export default connect(mapStateToProps)(TrabalhoMiristica);

If you guys need more information please tell me.

Thanks in advance

Answer 1

So, you have Redux store with app state, and local state of component. One option - you could store local state in React component, and work with it like you always do, using setState. It's a good option if your app simple and you don't need to have access to the component's local state from elsewhere.

But, if you have big app, and use Redux, another option - have component state in store, and use Redux actions to work with it. This way you could have global state, accessible from another components.

Take a look at Redux-UI or Redux Fractal, which could help you with that. This libs take care of storing local components state in store and give you helpers to work with that state on component level.

So you could have something like this:

ui({state: {showDescription: false}})(connect(mapStateToProps)(TrabalhoMiristica))

And use function updateUI('showDescription', true) somewhere in component. Component state would be available in this.props.ui.showDescription.

For more complicated cases you could dispatch actions like always, and catch them in Redux UI, thus modifying state from there.

Redux UI has not the best docs, but looking in tests folder could help.

In most simple case you could have store with your, em, cards, for example:

const cards = {
    cardID1: {
        title: 'some title',
        description: 'some description',
        expanded: false
    }
    ...
}

And have action like this:

const toggleDescription = (id) => {type: 'TOGGLE_DESCRIPTION', id};

And check this in reducer, toggling expand property by card id:

const reducer = (state, action) => {
     if (action.type === 'TOGGLE_DESCRIPTION') {
          // you have action.id here from action creator,
          // and state, where you can get card you need by that id,
          // change expanded property and return new state
     }
}