Meine Komponente wird nicht aktualisiert, mutiere ich den Zustand?

Question

Ich habe eine Container-Komponente, die eine Verbindung zu dem Zustand herstellt, den ich mit immutable.js gemacht habe. Wenn ich den Status aktualisiere, sagt mein Redux-Inspektor, dass der Status aktualisiert ist, aber meine Komponente die neuen Updates nicht erhält und nicht erneut rendert.

Mein Container-Komponente:

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); 

My Category Komponente

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 

Und

meine Minderer

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 

Ein Stück meines Staates, die ich als JSON-Objekt codiert haben

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: { 

Meine Vermutung ist, dass mein Reduzierer den Zustand mutiert? Obwohl ich mir nicht sicher bin, wie ich die unveränderlichen js Funktionen benutze?

Answer 1

Also habe ich dieses Problem behoben, indem ich den Konstruktor von einem Konstruktor in eine reguläre Funktion änderte und sie am Anfang meiner Rendermethode aufruft!

Answer 2

Sie sollten noch Konstruktor halten, aber nur darin haben, was getan werden muss, wenn das Objekt erstellt wird:

constructor(props) { super(props) }

Und ja, mit

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

ist gut. Ich habe noch nicht von jemandem gehört, der es oben in einer Renderfunktion aufgerufen hat. Schön zu wissen, dass das funktioniert.