React-Redux

Question

我有 2 个按钮，一个用于显示我的工作的详细信息，一个用于隐藏它。显示详细信息的按钮正在工作，但现在我需要在单击隐藏详细信息按钮时隐藏详细信息容器。

我希望我能很好地解释自己，如果您需要更多信息，请问我。

这是我的miristica.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { selectTrabalho } from '../../actions/index';
import { hideDetails } from '../../actions/hide_details';
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="show-detail btn btn-info">Detalhes</button>
                        <br/>
                        <br/>
                        <button onClick={() => this.props.hideDetails(trabalho)} type="button" className="btn btn-info">Esconder 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, hideDetails: hideDetails }, dispatch)
}


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

这是我的hide_detail.js动作

export function hideDetails(id, trabalho) {

return {
    type: 'HIDE_DETAILS',
    id,
    trabalho
};

}

这是我的reducer_hide_detail.js

export default function(state = {hideDetails: true}, action) {
switch(action.type) {
case 'HIDE_DETAILS':
    console.log("remove detail");   
}

return state;
}

这是我的详细视图

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

class TrabalhoMiristica extends Component {
render() {
    if (!this.props.trabalho) {
        return null;
    }

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

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


export default connect(mapStateToProps)(TrabalhoMiristica);

我有一个简单的控制台日志，当我单击按钮时它会工作。所以我只需要采取一些措施使按钮起作用，但我没有得到 :( 。有人可以帮助我吗？提前致谢。

更新：

这是 trabalho_m 的来源，来自我的具有数组的减速器

import { combineReducers } from 'redux';
- > import TrabalhoMiristica from './miristica/reducer_miristica';
import ActiveMiristica from './miristica/reducer_detalhe_miristica';
- > HIDE DETAIL REDUCER import HideDetails from './miristica/reducer_hide_detail';
import TrabalhoVet from './vet/reducer_vet';
import ActiveVet from './vet/reducer_detalhe_vet';

const rootReducer = combineReducers({

- > trabalho_m: TrabalhoMiristica,
trabalho_vet: TrabalhoVet,
activeMiristica: ActiveMiristica,
- > hideDetails: HideDetails,
activeVet : ActiveVet,


});

export default rootReducer;

Reducer Miristica

export default function() {

return [

    { id: 2, title: 'Miristica', tec: "Wordpress-Woocommerce", descricao: "Ustedes pueden aceptar mi negocio o aceptar las consequências. ¿Plata o plomo? Compremos una lavadora más grande, pues. Los políticos se espantan fácil. Una pistola y ya. La cárcel em Estados Unidos es peor que la muerte. El castillo, la torre yo soy. La espada que guarda el caudal. Tu el aire que respiro yo. Y la luz de la luna en el mar. La garganta que ansio mojar. Que temo ahogar de amor. Y cuales deseos me vas a dar? Dices tu: mi tesoro basta con mirarlo. Y tuyo será, y tuyo será", img: 'http://feiraalternativa.pt/wp-content/uploads/2016/04/Miristica-Bio-Cosm%C3%A9tica.png'},

];

}

非常感谢您的帮助！！

UDPDATE -

减速器index.js

import { combineReducers } from 'redux';
import TrabalhoMiristica from './miristica/reducer_miristica';
import ActiveMiristica from './miristica/reducer_detalhe_miristica';
import HideDetails from './miristica/reducer_hide_detail';
import TrabalhoVet from './vet/reducer_vet';
import ActiveVet from './vet/reducer_detalhe_vet';

const rootReducer = combineReducers({

trabalho_m: TrabalhoMiristica,
trabalho_vet: TrabalhoVet,
activeMiristica: ActiveMiristica,
hideDetails_m: HideDetails,
activeVet : ActiveVet,


});

export default rootReducer;

我已经将 reducer 的名称更改为 hideDetails_m 并且我已经更新了我的 stateToProps 函数

function mapStateToProps(state) {

return {
    trabalho_m: state.trabalho_m,
    hideDetails_m: state.hideDetails_m
};
}

现在我不明白你从哪里得到的

{ this.props. - > detailsHidden <- ? null : (
 <TrabalhoMiristica/>
)}

谢谢

更新-

Miristica.js



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="show-detail btn btn-info">Detalhes</button>
                        <br/>
                        <br/>
                        <button onClick={() => this.props.hideDetails(trabalho)} type="button" className="btn btn-info">Esconder Detalhes</button>
                        <br/>
                        <br/>
                        { this.props.detailsHidden ? null : (
                            <TrabalhoMiristica/>
                        )}
                    </div>
                </div>
            </li>
        );
    })
}

function mapStateToProps(state) {

return {
    trabalho_m: state.trabalho_m,
    hideDetails_m: state.detailsHidden
};
}

减速器reducer_hide_details.js

  export default function(state = {hideDetails: true}, action) {
  switch(action.type) {
  case 'HIDE_DETAILS':
  return Object.assign({}, state, {
   hideDetails: true
  }); 
  default:
  return state;
  }
  }

Index.js 减速机

import { combineReducers } from 'redux';
import TrabalhoMiristica from './miristica/reducer_miristica';
import ActiveMiristica from './miristica/reducer_detalhe_miristica';
import HideDetails from './miristica/reducer_hide_detail';
import TrabalhoVet from './vet/reducer_vet';
import ActiveVet from './vet/reducer_detalhe_vet';

const rootReducer = combineReducers({

trabalho_m: TrabalhoMiristica,
trabalho_vet: TrabalhoVet,
activeMiristica: ActiveMiristica,
hideDetails_m: HideDetails,
activeVet : ActiveVet,


});

export default rootReducer;

我必须将我的状态传递给我的地图函数吗？请帮忙。谢谢

更新

像这样？

{ this.props.hideDetails_m.hideDetails ? null : (
    <TrabalhoMiristica/>
)}


function mapStateToProps(state) {

return {
    trabalho_m: state.trabalho_m,
    hideDetails_m: state.hideDetails_m.hideDetails
};
}

更新语法错误：意外的标记 (11:8)

reducer_miristica.js

const initialState = [
{ showDetails: true,  id: 2, title: 'Miristica', tec: "Wordpress-   Woocommerce", descricao: "Ustedes pueden aceptar mi negocio o aceptar las consequências. ¿Plata o plomo? Compremos una lavadora más grande, pues. Los políticos se espantan fácil. Una pistola y ya. La cárcel em Estados Unidos es peor que la muerte. El castillo, la torre yo soy. La espada que guarda el caudal. Tu el aire que respiro yo. Y la luz de la luna en el mar. La garganta que ansio mojar. Que temo ahogar de amor. Y cuales deseos me vas a dar? Dices tu: mi tesoro basta con mirarlo. Y tuyo será, y tuyo será", img: 'http://feiraalternativa.pt/wp-content/uploads/2016/04/Miristica-Bio-Cosm%C3%A9tica.png'},
]

export default function(state = initialState, action) {
switch(action.type) {
case 'HIDE_DETAILS':
  return state.map(function(item){
    if (item.id == action.id) {
      return Object.assign({}, state, { showDetails: false }
    }
    return item;
  });
 default:
  return state;
 }
}

我已经把它放在 babel 验证器上

repl: Unexpected token (11:8)
9 |         if (item.id == action.id) {
10 |           return Object.assign({}, state, { showDetails: false }
11 |         }
   |         ^

谢谢！

更新

详情_miristica.js

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

class TrabalhoMiristica extends Component {
render() {
    if (!this.props.trabalho) {
        return null;
    }

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

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


export default connect(mapStateToProps)(TrabalhoMiristica);

在数组中我有 tec : 'Wordpress-woocomerce' 并且我在细节中展示了它。

谢谢!!

Answer 1

首先，您必须将详细视图包装在引用 state.hideDetails 的 if 语句中。（我在你的问题中找不到你的详细视图）

但我认为你的问题的主要部分是在那个减速器中做什么。在您的减速器中，您必须 return 新状态。因此，如果您执行 'HIDE_DETAILS 操作，您需要 return:

return { hideDetails: true }

如果您想向状态对象添加更多字段，这会很快崩溃。因此，我建议使用 Object.assign。所以你的减速器看起来像这样：

export default function(state = {hideDetails: true}, action) {
  switch(action.type) {
    case 'HIDE_DETAILS':
      return Object.assign({}, state, {
       hideDetails: true
      }); 
    default:
      return state;
    }
}

编辑：

好的，根据您的意见，我认为您仍然需要帮助将详细视图包装在条件中。

我不太明白这个 trabalho_m 状态是从哪里来的，但是你必须添加 state.hideDetails 或者如果你要组合多个减速器你的 state.detailReducer.hideDetails （假设reducer 被命名为 detailReducer) 到你的 mapStateToProps 函数。注意命名冲突，因为您的操作也被命名为 hideDetails。

无论如何 you can't use if-else-statements in JSX 因此你应该尝试这样的事情：

{ this.props.detailsHidden ? null : (
  <TrabalhoMiristica/>
)}

编辑 2：

你的命名不同，你没有像我想象的那样深入地映射道具。所以在你的情况下它将是：

{ this.props.hideDetails_m.hideDetails ? null : (
  <TrabalhoMiristica/>
)}

编辑 3：

现在我再次阅读了您添加的所有内容，我注意到我错过了您可能想要保存隐藏状态而不是全局但在 trabalho 上。

我认为最好的方法是将你的 hiddenDetails_m 放在一起并存储在 trabalho_m 状态。

所以 reducers/index.js 将是：

import { combineReducers } from 'redux';
import TrabalhoMiristica from './miristica/reducer_miristica';
import ActiveMiristica from './miristica/reducer_detalhe_miristica';
import TrabalhoVet from './vet/reducer_vet';
import ActiveVet from './vet/reducer_detalhe_vet';

const rootReducer = combineReducers({

  trabalho_m: TrabalhoMiristica,
  trabalho_vet: TrabalhoVet,
  activeMiristica: ActiveMiristica,
  activeVet : ActiveVet,


});

export default rootReducer;

而 reducers/reducer_miristice.js 将是：

const initialState = [
  { showDetails: true,  id: 2, title: 'Miristica', tec: "Wordpress-Woocommerce", descricao: "Ustedes pueden aceptar mi negocio o aceptar las consequências. ¿Plata o plomo? Compremos una lavadora más grande, pues. Los políticos se espantan fácil. Una pistola y ya. La cárcel em Estados Unidos es peor que la muerte. El castillo, la torre yo soy. La espada que guarda el caudal. Tu el aire que respiro yo. Y la luz de la luna en el mar. La garganta que ansio mojar. Que temo ahogar de amor. Y cuales deseos me vas a dar? Dices tu: mi tesoro basta con mirarlo. Y tuyo será, y tuyo será", img: 'http://feiraalternativa.pt/wp-content/uploads/2016/04/Miristica-Bio-Cosm%C3%A9tica.png'},
]


export default function(state = initialState, action) {
  switch(action.type) {
    case 'HIDE_DETAILS':
      return state.map(function(item){
        if (item.id == action.id) {
          return Object.assign({}, item, { showDetails: false }
        }
        return item;
      });
    default:
      return state;
  }
}

这意味着您的组件看起来像这样：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { selectTrabalho } from '../../actions/index';
import { hideDetails } from '../../actions/hide_details';
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="show-detail btn btn-info">Detalhes</button>
                        <br/>
                        <br/>
                        <button onClick={() => this.props.hideDetails(trabalho)} type="button" className="btn btn-info">Esconder Detalhes</button>
                        <br/>
                        <br/>
                        { trabalho.showDetails ? (
                          <TrabalhoMiristica/>
                        ) : null }
                    </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, hideDetails: hideDetails }, dispatch)
}


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

编辑 3.1：

我没有添加有关该操作的任何信息。

您的操作需要一个 ID 和一个 trabalho，但您只在组件中将一个 trabalho 传递给它。我认为您现在不需要 trabalho，所以只需传入 id 即可。这就是我在减速机方面的假设。您的操作将如下所示：

export function hideDetails(id) {

return {
    type: 'HIDE_DETAILS',
    id,
};

并且您必须在组件中更改它：

<button onClick={() => this.props.hideDetails(trabalho)} type="button" className="btn btn-info">Esconder Detalhes</button>

至：

<button onClick={() => this.props.hideDetails(trabalho.id)} type="button" className="btn btn-info">Esconder Detalhes</button>

}

编辑 4：

我认为我们远远超出了您的问题范围，但您的关键警告是由于未将唯一密钥传递给 <li>。（详细了解 here.）

所以您的组件现在看起来像这样。

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

class Miristica extends Component {

renderList(){

    return this.props.trabalho_m.map((trabalho) => {
        return (
            <li key={trabalho.id}>
                <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="show-detail btn btn-info">Detalhes</button>
                        <br/>
                        <br/>
                        <button onClick={() => this.props.hideDetails(trabalho)} type="button" className="btn btn-info">Esconder Detalhes</button>
                        <br/>
                        <br/>
                        { trabalho.showDetails ? (
                          <TrabalhoMiristica/>
                        ) : null }
                    </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, hideDetails: hideDetails }, dispatch)
}


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

React-Redux - 创建一个隐藏容器的动作

React-Redux - Create an Action to hide a container

javascript

reactjs

redux