Reduxの状態は変更しないで変更して、不変JS

Question

で再レンダリング、子コンポーネントには、再レンダリングをされていません。私は不変の状態オブジェクトを持つために不変のJSを使用しています。

これは減速です：

const initialState = { 
    sectionsArray: [], 
}; 

export default function seatingChartSections(state = fromJS(initialState), action) { 
    switch (action.type) { 
    case actionTypes.LOAD_SEATING_CHART_SECTIONS: 
     return fromJS({ sectionsArray: action.seatingChartSections }); 

    case actionTypes.CLICK_SECTION: 
     return state.updateIn(['sectionsArray'], (list) => { 
     const index = list.findIndex(item => item.get('_key') === action.section); 
     if (list.getIn([index, 'selected']) === true) { 
      return list.setIn([index, 'selected'], false); 
     } 
     return list.setIn([index, 'selected'], true); 
     }); 

    default: 
     return state; 
    } 
} 

これは、親コンポーネントです：

class SeatingChartSections extends Component { 
    render() { 
    return (
     this.props.seatingChartSections.sectionsArray.map(section => (<SeatingChartSection 
     key={section._key} 
     section={section} 
     onClick={this.selectSection} 
     />)) 
    ); 
    } 
} 

function mapStateToProps(state) { 
    return { 
    seatingChartSections: state.seatingChartSections.toJS(), 
    }; 
} 

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

これは、子コンポーネントである：

私はなるように変更する必要がありますどのような

class SeatingChartSection extends Component { 
    constructor(props) { 
    super(props); 
    if (this.props.section.selected) { 
     this.state = { 
     fill: '#1aa3ff', 
     stroke: '#4d4dff', 
     }; 
    } 
    if (!this.props.section.selected) { 
     this.state = { 
     fill: '#cce6ff', 
     stroke: '#4d4dff', 
     }; 
    } 
    } 
    render() { 
    return (
     <polygon 
     onClick={this.props.onClick} 
     id={this.props.section._key} 
     fillOpacity={0.4} 
     fill={this.state.fill} 
     stroke={this.state.stroke} 
     points={this.props.section.points} 
     /> 
    ); 
    } 
} 

export default SeatingChartSection; 

子が再レンダリングされ、コンストラクタがthis.state.fillを変更しますか？

Answer 1

状態を更新するためにsetStateメソッドを使用します。

置き換えます

this.state = { 
    fill: '#cce6ff', 
    stroke: '#4d4dff', 
}; 

で：

this.setState({ 
    fill: '#cce6ff', 
    stroke: '#4d4dff', 
}); 

あなたが反応するためState and Lifecycle - Use State Correctlyのドキュメントを見てみる場合は、リストされた最初の事は次のとおりです。

は直接

// Wrong 
this.state.comment = 'Hello'; 

// Correct 
this.setState({comment: 'Hello'}); 

をステートを変更しないでください