React/Reduxコンポーネントが状態変更時に再レンダリングされない

Question

この質問は何度か答えられたと思いますが、具体的なケースは見つかりません。だから、基本的に私は（それが高い場合、偽）画面のサイズが変更と未満500pxなどされている場合はtrueに状態コール「isSmall」に変更し、アクションをトリガーするアプリケーションコンポーネントを持って

https://codesandbox.io/s/jjy9l3003

class App extends React.Component { 
... 
resizeHandeler(e) { 
    const { window, dispatch } = this.props; 
    if (window.innerWidth < 500 && !this.state.isSmall) { 
     dispatch(isSmallAction(true)); 
     this.setState({ isSmall: true }); 
    } else if (window.innerWidth >= 500 && this.state.isSmall) { 
     dispatch(isSmallAction(false)); 
     console.log(isSmallAction(false)); 
     this.setState({ isSmall: false }) 
    } 
    }; 

    componentDidMount() { 
    const { window } = this.props; 
    window.addEventListener('resize', this.resizeHandeler.bind(this)); 
    } 
... 

私はHeaderContainerと呼ばれる、Appの子でStoreに接続され、状態が "isSmall"であるため、 "isSmall"変更状態のときにこのコンポーネントを再レンダリングします。

class Header extends React.Component { 

    constructor(props) { 
    super(props); 

    this.isSmall = props.isSmall; 
    this.isHome = props.isHome; 
    } 
    ... 
    render() { 
    return (
     <div> 
     { 
      this.isSmall 
      ? 
      (<div>Is small</div>) 
      : 
      (<div>is BIG</div>) 
     } 
     </div> 
    ); 
    } 
    ... 

私はコンソールを介して見ることができますが、還元は実際にはヘッダーコンポーネントが再レンダリングされていないストアを更新しています。 誰かが私が逃していることを指摘できますか？

私は "connect（）" redux-react関数を誤解していますか？

Answer 1

あなたのコンポーネントは、あなたのmapStateToProps機能にアクセスしている小道具（ISHOMEとisSmallが）から取られていることを意味することにconnect

const mapStateToProps = (state, ownProps) => { 
    return { 
    isHome: ownProps.isHome, 
    isSmall: state.get('isSmall') 
    } 
} 


export const HeaderContainer = connect(mapStateToProps)(Header); 

経由Reduxのストアに接続されている投稿のリンクをあなたのコードを見てみますreduxストアとあなたのコンポーネントに小道具として渡されます。

あなたが使用する必要があり、あなたのコンポーネントを再レンダリング反応していTO「this.props」（毎回小道具の変化と呼ばれるレンダリングとして）render関数内：あなたはでよくそれをやっている

render() { 
    return (
     <div> 
     { 
      this.props.isSmall 
      ? 
      (<div>Is small</div>) 
      : 
      (<div>is BIG</div>) 
     } 
     </div> 
    ); 
    } 

constructorですが、コンストラクタはコンポーネントがマウントされる前に一度だけ呼び出されます。 https://reactjs.org/docs/react-component.html#constructor

Header.jsファイルでconstructorを完全に削除することができます。あなたはまたに（例えばthis.isSmall = props.isSmall;）パブリッククラスのプロパティを使用しないでください

が可能な場合に反応し、あなたのコンポーネントがそれを必要とするときリアクトローカル状態を利用します。https://reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class

Answer 2

コンポーネントは1度だけマウントされ、新しい小道具を渡すことによって更新されます。したがって、コンストラクタはマウント前に一度だけ呼び出されます。つまり、そこに設定したインスタンスのプロパティは、マウントされたコンポーネントの存続期間中は決して変更されません。更新作業を行うには、render()関数のthis.propsに直接アクセスする必要があります。この場合、何もしないのでコンストラクタを削除することができます。