React-Redux

Question

我正在制作作品集，当我点击详细信息按钮时，我会显示有关该特定作品的详细信息，接下来我想做的是在我不想再看到详细信息时隐藏它们，为此，我认为我需要将我的按钮设为切换按钮以隐藏和显示详细信息。

我是 React 和 Redux 的新手，我正在学习。

这是我的 GitHub 存储库

https://github.com/hseleiro/PortBeta

您只需启动 npm 即可启动服务器。

再一次 objective 是制作一个切换按钮来隐藏和显示细节，我坚持了下来，我不能再进一步了。

有人可以帮助我吗？

这是我的 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);

这是我的细节 .js，我想隐藏和显示的那个

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

如果你们需要更多信息，请告诉我。

提前致谢

Answer 1

因此，您拥有包含应用程序状态和组件本地状态的 Redux 存储。一种选择——您可以将本地状态存储在 React 组件中，并像往常一样使用它，使用 setState。如果您的应用程序简单并且您不需要从其他地方访问组件的本地状态，这是一个不错的选择。

但是，如果您有大型应用程序并使用 Redux，另一种选择 - 存储组件状态，并使用 Redux 操作来处理它。这样你就可以拥有全局状态，可以从其他组件访问。

看看 Redux-UI or Redux Fractal，它可以帮助你。此库负责在存储中存储本地组件状态，并为您提供助手以在组件级别处理该状态。

所以你可以有这样的东西：

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

并在组件的某处使用函数 updateUI('showDescription', true)。组件状态将在 this.props.ui.showDescription.

中可用

对于更复杂的情况，您可以像往常一样分派操作，并在 Redux UI 中捕获它们，从而从那里修改状态。

Redux UI 没有最好的文档，但查看测试文件夹可能会有所帮助。

在最简单的情况下，您可以使用您的 em 卡片进行存储，例如：

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

并采取这样的行动：

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

并在 reducer 中检查，通过卡 ID 切换 expand 属性：

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
     }
}

React-Redux - 切换按钮以显示和隐藏详细信息

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

javascript

reactjs

redux