javascript - React-Redux - 创建一个隐藏容器的 Action

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 Action

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

这是我的详细 View

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 的来源，来 self 的具有数组的 reducer

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

];

}

非常感谢您的帮助!!

更新 -

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

REDUCERreducer_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 reducer

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;

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

更新

像这样？

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


function mapStateToProps(state) {

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

更新语法错误:意外的 token (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 |         }
   |         ^

谢谢!

更新

detail_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

首先，您必须将详细 View 包装在引用 state.hideDetails 的 if 语句中. (我在你的问题中找不到你的详细 View )

但我认为您问题的主要部分是在该 reducer 中做什么。在您的 reducer 中，您必须返回新状态。所以如果你的 'HIDE_DETAILS您想要返回的操作:

return { hideDetails: true }

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

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

编辑:

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

我不太明白这个trabalho_m在哪里状态来自，但您必须添加 state.hideDetails或者，如果您要组合多个 reducer ，您的 state.detailReducer.hideDetails (假设 reducer 被命名为 detailReducer )到你的 mapStateToProps功能。注意命名冲突，因为您的操作名为 hideDetails

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

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

编辑 2:

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

{ 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 即可。这就是我在 reducer 方面的假设。您的操作将如下所示:

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:

我认为我们远远超出了您的问题范围，但您的关键警告是由于未将唯一 key 传递给 <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);