私のコンポーネントは更新されていません、私は状態を変更していますか？

Question

私はimmutable.jsで作成した状態に接続するコンテナコンポーネントを持っています。状態を更新すると、私のreduxインスペクタは状態が更新されていると伝えますが、コンポーネントは新しい更新を取得せず、再レンダリングもしません。

マイコンテナコンポーネント：

import React, { Component } from 'react' 
import { connect } from 'react-redux' 
import { setCategoryActive } from '../actions' 
import Category from '../components/Category' 

class MenuList extends Component { 


    constructor(props) { 
    super(props) 
    this.categories = this.props.categories 
    this.subreddits = this.props.subreddits 
    this.allCategories = this.categories.get("allCategories") 
    this.byName = this.categories.get("byName") 
    } 

    printSubreddits(category) { 
    const subreddits = this.byName.get(category) 
    const subredditsByName = subreddits.get("subredditsByName") 

    const list = subredditsByName.map((subreddit, i) => { 
     return <p className="swag" key={i}>{subreddit}</p> 
    }) 

    return list 
    } 

    isCategoryActive(category) { 
    const cat = this.byName.get(category) 
    return cat.get("active") 
    } 

    printCategory(category, i) { 
    console.log(this.isCategoryActive(category)) 
    return (
     <div className="category-container" key={i}> 
     <Category name={category} 
      active={this.isCategoryActive(category)} 
      setActive={this.props.setCategoryActive.bind(this, category)} /> 
     {this.isCategoryActive(category) ? this.printSubreddits(category) : null} 
     </div> 
    ) 
    } 


    render() { 

    return (
     <div> 
     {this.allCategories.map((category, i) => { 
      const x = this.printCategory(category, i) 
      return x 
     }, this)} 
     </div> 
    ) 
    } 
} 

const mapStateToProps = (state) => ({ 
    categories: state.subredditSelector.get('categories'), 
    subreddits: state.subredditSelector.get('subreddits') 
}) 

export default connect(mapStateToProps, { 
    setCategoryActive 
})(MenuList); 

マイカテゴリーコンポーネント

class Category extends Component { 

    printToggle(active) { 
    if (active) { 
     return <span> [-]</span> 
    } else { 
     return <span> [+]</span> 
    } 
    } 

    componentWillReceiveProps(nextProps) { 
    this.printToggle(nextProps.active) 
    } 

    render() { 

    const { setActive, active, name } = this.props 

    return (
     <div className="category-container"> 
     <a onClick={setActive} 
     href="#" 
     className="category-title"> 
      {name} 
      {this.printToggle(active)} 
     </a> 
     </div> 
    ) 
    } 

} 

export default Category 

そして、私の減速

import { fromJS } from 'immutable' 
import { 
    SET_SUBREDDIT_ACTIVE, 
    SET_CATEGORY_ACTIVE 
} from '../actions' 
import List from '../data/nsfw_subreddits.js' 

const initState = fromJS(List) 

const subredditSelector = (state = initState, action) => { 
    switch (action.type) { 
    case SET_SUBREDDIT_ACTIVE: 
     return state 
    case SET_CATEGORY_ACTIVE: 
     return state.updateIn(['categories', 'byName', action.payload.name], 
     x => x.set('active', !x.get('active'))) 
    default: 
     return state 
    } 
} 

export default subredditSelector 

私はJSONオブジェクトとしてコード化されてきた私の状態の作品

const list = { 
    categories: { 
    byName: { 
     "example": { 
     name: "example", 
     id: 1, 
     active: true, 
     subredditsByName: ["example", "example"] 
     }, 
     "example": { 
     name: "example", 
     id: 2, 
     active: true, 
     subredditsByName: ["example"] 
     }, 
     "example": { 
     name: "example", 
     id: 3, 
     active: true, 
     subredditsByName: ["example", "example", "example"] 
     } 
    }, 
    allCategories: ["example", "example", "example"] 
    }, 
    subreddits: { 

私のレデューサーは州に変異を起こしていると思いますか？私は不変のjs関数を使用しているので、どのようにわからないのですか？

Answer 1

コンストラクタをコンストラクタから通常の関数に変更して、この問題を解決し、それをレンダリングメソッドの先頭で呼び出しました。

Answer 2

あなたはまだあなたのコンストラクタを保つが、唯一のオブジェクトが最初に作成されたときに何をすべきか、それを持っている必要があります。

constructor(props) { super(props) }

そして、はい、

cleanPropData(){ this.categories = this.props.categories this.subreddits = this.props.subreddits this.allCategories = this.categories.get("allCategories") this.byName = this.categories.get("byName") }

を持ちます結構です。私はレンダリング機能の最上位でそれを呼び出す人について聞いたことがありません。そのことを知ってうれしいです。