Redux：单容器，多组件

我对React和Redux都很陌生，对于正在处理的案例，我不确定最佳实践和技术解决方案。我使用Dan Abramov here定义的“组件”和“容器”。Redux：单容器，多组件

我正在处理的组件是过滤组件的一个小集合：一个输入文本字段和两个按钮，全部过滤实体列表。我试过两种方法：

第一种方法：单个组件包含两种类型的容器的三个实例，连接到相应组件的容器。

这是我第一次做的。在这里，根组件如下所示：

import React, { PropTypes, Component } from 'react'; 
import Config from '../../config'; 
import FilterInput from '../containers/FilterInput'; 
import FilterLink from '../containers/FilterLink' 

class FilterController extends Component { 
    render() { 
     return (
      <div className='filterController'> 
       <FilterInput displayName="Search" filterName={Config.filters.WITH_TEXT} /> 
       <FilterLink displayName="Today" filterName={Config.filters.IS_TODAY} /> 
       <FilterLink displayName="On TV" filterName={Config.filters.ON_TV} /> 
      </div> 
     ) 
    } 
} 
export default FilterController;

此处引用的两个容器看起来非常象预期的那样做连接的组件。我将显示FilterLink为例：

import React, { PropTypes, Component } from 'react'; 
import {connect} from 'react-redux'; 
import {toggleFilter} from '../actions'; 
import FilterButton from '../components/filterbutton' 

const mapStateToProps = (state, ownProps) => { 
    return { 
     active: !!state.program.filters[ownProps.filterName] 
    } 
} 

const mapDispatchToProps = (dispatch, ownProps) => { 
    return { 
     onClick:() => { 
      dispatch(toggleFilter(ownProps.filterName, ownProps.input)) 
     } 
    } 
} 

const FilterLink = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(FilterButton) 

export default FilterLink

以及相应的FilterButton组件：

import React, { PropTypes, Component } from 'react'; 

class FilterButton extends Component { 

    render() { 
     return (
      <button className={this.props.active ? 'active' : ''} 
        onClick={this.props.onClick}> 
       {this.props.displayName} 
      </button> 
     ) 
    } 
} 

FilterButton.propTypes = { 
    active: PropTypes.bool.isRequired, 
    displayName: PropTypes.string.isRequired, 
    onClick: PropTypes.func.isRequired, 
    filterName: PropTypes.string.isRequired 
}; 

export default FilterButton;

这种方法的工作原理，但我认为它不应该是必要建立两个不同的容器。这再次引导我进行第二次尝试。

第二种方法：单个容器包含多个组件。

在这里，我提出了更大的容器：

import React, { PropTypes, Component } from 'react'; 
import Config from '../../config'; 
import {connect} from 'react-redux'; 
import {toggleFilter} from '../actions'; 
import FilterButton from '../components/filterbutton' 
import FilterInput from '../components/filterinput' 

class FilterContainer extends Component { 
    render() { 
     const { active, currentInput, onChange, onClick } = this.props; 
     return (
      <div className='filterController'> 
       <FilterInput displayName="Search" filterName={Config.filters.WITH_TEXT} currentInput={currentInput} onChange={onChange} /> 
       <FilterButton displayName="Today" filterName={Config.filters.IS_TODAY} active={active} onClick={onClick}/> 
       <FilterButton displayName="On TV" filterName={Config.filters.ON_TV} active={active} onClick={onClick}/> 
      </div> 
     ) 
    } 
} 

const mapStateToProps = (state, ownProps) => { 
    return { 
     active: !!state.program.filters[ownProps.filterName], 
     currentInput: state.program.filters[ownProps.filterName] ? state.program.filters[ownProps.filterName].input : '' 
    } 
} 

const mapDispatchToProps = (dispatch, ownProps) => { 
    return { 
     onClick:() => { 
      dispatch(toggleFilter(ownProps.filterName, ownProps.input)) 
     }, 
     onChange: newValue => { 
      dispatch(toggleFilter(ownProps.filterName, newValue.target.value)) 
     } 
    } 
} 

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

在此，对整个组件的所有状态的交互被收集在一个单一的成分，它。这里的组件与第一种方法相同。但是，这并不是真的有效：ownProps在mapStateToProps和mapDispathToProps中都是空的。我可能误解了react-redux连接的工作原理。

因此，考虑到这些事情，我有两个问题：根据容器和组件，构建此组件的最佳方法是什么？其次，为什么在第二种方法中没有像第一种方法那样拥有类似的工作？

谢谢你的时间。

来源

2016-04-06 Øyvind Nordsted Wedøe

不确定我现在有关于结构的具体答案。至于“ownProps”，则表示专门由其父代传递给定组件的道具。由于您是connect() -ing FilterController，这意味着“ownProps”将来自您呈现该组件的任何位置，例如：return <FilterController prop1="a" prop2={someVariable} />。

根据你如何编写这些映射函数，看起来你确实想连接FilterInput和FilterButton组件，而不是FilterController。

来源

2016-04-06 16:51:29 markerikson

Redux：单容器，多组件

回答

相关问题