アクションがディスパッチされ、状態更新が行われたときにコンポーネントが再レンダリングされない

Question

私のInspectorOptionコンポーネントの1つをクリックすると、reduxロガーはアクションがディスパッチされ、状態が期待どおりに更新されることを示します。

My InspectorSelectとchildren InspectorOptionコンポーネントは、react-reduxのmapStateToPropsへの接続を使用します。これらのコンポーネントは、stateから来たものに依存します。

しかし、状態が更新されており、コンポーネントが状態に依存している場合でも、状態が更新されると、コンポーネントは再レンダリングされません。

状態が変わったときにコンポーネントが再レンダリングされないのはなぜですか？これを修正するにはどうすればよいですか？

@connect((state) => { 
    return { 
     options: state.inspector.options 
    } 
}) 
export default class InspectorSelect extends Component { 
    render() { 
     return (
      <div> 
       { 
        this.props.options.map(option => { 
         return <InspectorOption 
          option={ option } 
          key={ option.id } 
         /> 
        }) 
       } 
      </div> 
     ) 
    } 
} 

https://github.com/caseysiebel/dashboard/blob/master/src/components/InspectorSelect.js#L17

Answer 1

@markeriksonが指摘したように：時間の99.9％を、それが減速して

Reduxの状態の偶発変異によるものだdashboard/src/reducers/inspector.js

export default function reducer(state = { 
    options: [] 
}, action) { 

    switch (action.type){ 
     case 'SET_INSPECTOR': 
      state.options = state.options.map(option => { // <-- mutation here 
       return option.id === action.payload ? 
        { ...option, active: true } : 
        { ...option, active: false } 
      }) 
      return state // returning mutated state 
     default: 
      return state 
    } 
} 

の変異があります

は

export default function reducer(state = { 
    options: [] 
}, action) { 

    switch (action.type){ 
     case 'SET_INSPECTOR': 
      var newOptions = state.options.map(option => { 
       return option.id === action.payload ? 
        { ...option, active: true } : 
        { ...option, active: false } 
      }); 
      return {...state, options: newOptions} // returning new state 
     default: 
      return state 
    } 
}