ImmutableJS für den Zustand der React-Komponente

Question

Also entschied ich mich ImmutableJS für die Arbeit mit Redux zu verwenden. Jetzt frage ich mich, ob es bequem ist, es zur Verwaltung der React Component state zu verwenden. I codiert folgendes:

class Navigation extends React.Component { 
    constructor(props) { 
    super(props); 
    const $$fixedLinks = Immutable.fromJS(this.props.fixedLinks); 
    const $$dynamicLinks = Immutable.fromJS(this.props.dynamicLinks); 

    this.state = { 
     fixedLinks: this.addHrefs($$fixedLinks), 
     dynamicLinks: this.addHrefs($$dynamicLinks), 
    }; 
    } 

    // Given a list of shape (id, name) we need to 
    // add href for the links 
    addHrefs = list => list.map(item => item.set('href', toUnderscore(item.get('name')))) 

    render() { 
    const fixed = this.state.fixedLinks.map(
     link => (
     <Link key={link.get('id')} href={`#${link.get('href')}`} title={link.get('name')} /> 
    ), 
    ); 
    const dynamic = this.state.dynamicLinks.map(
     link => (
     <Link key={link.get('id')} href={`#${link.get('href')}`} title={link.get('name')} /> 
    ), 
    ); 
    return (
     <Anchor> 
     {fixed} 
     {dynamic} 
     </Anchor> 
    ); 
    } 
} 

Wie Sie $$ zeigt ein unveränderliches Objekt sehen. Aber dann möchte ich eine neue Eigenschaft hinzufügen mit addHrefs und speichern Sie es unter state.

Es funktioniert wie ein Charme. Aber es ist ein bisschen akward das folgende:

<Link key={link.get('id')} href={`#${link.get('href')}`} title={link.get('name')} /> 

sehen? Verwenden von get() zum Abrufen von Werten aus dem unveränderlichen Objekt. Jetzt

, einige Fragen:

1. Ist es eine gute Idee (oder Ansatz) zu verwenden ImmutableJS für die Verwaltung von Zustand in React.Component? Wenn ich ImmutableJS für diesen Zweck verwenden kann, sollte this.state ein unveränderliches Objekt sein? wenn ja, wie geht man mit this.setState() um?
2. Wenn nicht, kann ich nicht loadash verwenden, da es nicht mit ImmutableJS funktionieren wird, wie kann ich mit unveränderlichen Zuständen beschäftigen innerhalb React.Component?

Answer 1

1. Ist es eine gute Idee (oder Ansatz) ImmutableJS zu verwenden, für den Zustand in React.Component Verwaltung?

Ich kann nicht sehen, warum es eine schlecht Idee wäre. Es ist sogar in React docs erwähnt.

2. Wenn ich ImmutableJS für diesen Zweck verwenden kann, soll this.state ein unveränderliches Objekt sein? wenn ja, wie geht man mit this.setState() um?

Das ist wirklich ist Ihnen überlassen. Es gibt Vorteile, wenn der Komponentenstatus unveränderbar ist (wie PureComponent zu verwenden und eine optimierte Leistung zu erhalten).

Ich bin mir nicht sicher, was du mit "Deal mit this.setState()" meinst. Sie verwenden es weiterhin wie gewohnt: Rufen Sie Ihren Status ab, aktualisieren Sie ihn (und erhalten Sie ein neues Objekt), rufen Sie setState mit dem neuen Objekt auf.

1. Wenn nicht, kann ich nicht loadash verwenden, da es nicht mit ImmutableJS funktionieren wird, wie kann ich mit unveränderlichen Zuständen innerhalb React.Component umgehen?

können Sie const myState = this.state.toJS() anrufen und mit ihm verwenden lodash. Versuchen Sie einfach nicht, den Zustand der Komponente zu ändern, indem Sie etwas in myState ändern, denn das wird nicht funktionieren.

Ich hoffe das beantwortet Ihre Fragen, wenn ich sie richtig verstanden habe :)