反応部品の状態をreduxの店とは別に更新する

Question

私は選択可能なアイテムのリストを持つ反応コンポーネントを持っています。ユーザーがボタンをクリックしてリストを表示するまで、リストを非表示にします。

'showList'がグローバルストアの一部である理由はありません。なぜなら、このコンポーネントだけが重要であるからです。

私はredux connectを使用していますが、ローカルコンポーネントthis.setStateにアクセスする方法を理解するのが難しく、常にundefinedです。

// Redux connect 
import { connect } from 'react-redux' 
import { setClockSpeed } from '../actions' 
import SpeedControls from '../components/speedControl/SpeedControl' 

let showList = false; 
const mapStateToProps = (state) => { 
    return { 
    speed: state.clock.speed, 
    speeds: [ 1, 5, 10, 25, 50, 100, 150, 200 ], 
    showList 
    } 
} 

const mapDispatchToProps = (dispatch) => { 
    return { 
    setClockSpeed: newSpeed => displatch(setClockSpeed(newSpeed)), 
    toggleList: this.setState({showList: !showList}) //undefined here 
    } 
} 

const PlayerSpeedControls = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(SpeedControls) 

export default PlayerSpeedControls 

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

import style from './SpeedControl.css'; 


const getSpeedItemClass = (s, idx, speed, speeds) => { 
    let speedClass = style.speedItem; 
    if (idx === 0) speedClass += ' ' + style.lastSpeedItem; 
    if (idx === speeds.length - 1) speedClass += ' ' + style.firstSpeedItem; 
    if (s === speed) speedClass += ' ' + style.currentActiveSpeed; 
    return speedClass 
} 



const SpeedControls = ({ setClockSpeed, toggleList, speed, speeds, showList }) => (
    <div className={style.speedControl}> 
    <div className={style.speedList}> 
     <ul className={showList ? style.speedOptions : style.hideSpeedOptions}> 
     { speeds.map((s, idx) => { 
      return <li key={idx} className={getSpeedItemClass(s, idx, speed, speeds)} onClick={(s) => { 
      }}>{s}x</li> 
      }) 
     } 
     </ul> 
     <span className={style.currentSpeed} onClick={ toggleList || this.setState //undefined here too }>{speed}x</span> 
    </div> 
    </div> 
); 

SpeedControls.propTypes = { 
    setClockSpeed: PropTypes.func.isRequired, 
    speed: PropTypes.number.isRequired, 
    speeds: PropTypes.array.isRequired 
}; 

export default SpeedControls; 

Answer 1

この例では、反応が少ないレスポンスを使用しています。そのようなコンポーネントの状態にアクセスすることはできません。コンポーネント内に状態を設定するには、normal componentsを使用します。

class SpeedControls extends Component { 
    render() { 
    } 
} 

mapDispatchToProps反応-再来が提供するだけでユーティリティ関数である、それはcomponent.Thereはあなたがそこに状態にアクセスしたり、更新することができます方法はありませんではありません。