Redux und unveränderliche js, verlor ich meinen Zustand nach dem Versuch, unveränderlich zu verwenden

Question

Nach meiner Entwicklung mit reactjs und redux dachte ich, dass es besser wäre, mit unveränderlichen.js zu arbeiten, während Redux verwenden.

Aber ... Vielleicht bin ich zurückgeblieben oder man braucht etwas Übung, bevor man es richtig benutzt, alles ist abgestürzt.

Und wenn Sie helfen können zu verstehen, was hier falsch ist, wäre es toll!

So, hier war mein erster Code:

export function posts(state = { 
    isFetching: true, 
    didInvalidate: false, 
    items: [] 
}, action) { 
    switch (action.type) { 
    case INVALIDATE_REQ: 
     return Object.assign({}, state, { 
      didInvalidate: true 
     }); 
    case REQUEST_POSTS: 
     return Object.assign({}, state, { 
      isFetching: true, 
      didInvalidate: false 
     }); 
    case RECEIVE_POSTS: 
     return Object.assign({}, state, { 
      isFetching: false, 
      didInvalidate: false, 
      items: action.posts 
     }); 
    default: 
     return state; 
    }; 
}; 

, dass ich diese Art und Weise verändert:

const initPostState = Map({ 
    isFetching: true, 
    didInvalidate: false, 
    items: [] 
}); 
export function posts(state = initPostState, action) { 
    switch (action.type) { 
    case INVALIDATE_REQ: 
     return state.set('didInvalidate', true); 
    case REQUEST_POSTS: 
     return state.set({ 
     isFetching: true, 
     didInvalidate: false 
     }); 
    case RECEIVE_POSTS: 
     return state.set({ 
     isFetching: false, 
     didInvalidate: false, 
     items: action.posts 
     }); 
    default: 
     return state; 
    }; 
}; 

Und mein Behälter MapStateToProps:

function mapStateToProps(state) { 
    const { 
    posts: isFetching, 
    posts 
    } = state.posts; 

    console.log(state); 
... 

Das Problem ist also, wie greife ich auf meine Staaten zu? Die Konsole des Staats berichten, dass:

Ich bin verloren! Hilfe!

Answer 1

Sie benötigen get Methode von immutableJS

Gebrauch verwenden state.get('didInvalidate') den Wert von didInvalidate zugreifen zu können, in ähnlicher Weise für andere Werte.

Wenn Sie ein Javascript-Objekt verwenden, dann können Sie es wie state.get('something').toJS()

dies tun sollte Ihnen die Idee

function mapStateToProps(state){ 
    const isFetching = state.get('isFetching'), 
    const items = state.get('items').toJS(); 
} 

Answer 2

Wenn Sie ImmutableJS mit Redux verwenden, ist der ganze App-Status unveränderlich. Verwenden Sie in der connect-Funktion state.get ("posts"), um auf den posts-Status zuzugreifen. Dann müssen Sie get() verwenden, um auf die posts Statuseigenschaften zuzugreifen. Oder Sie können toJs() verwenden, um zu vermeiden, dass Sie innerhalb Ihrer Komponente unveränderlich manipulieren müssen.

Answer 3

Nie toJS() in mapStateToProps verwenden. Aus dem Redux docs:

Converting an Immutable.JS object to a JavaScript object using toJS() will return a new object every time. If you do this in mapSateToProps , you will cause the component to believe that the object has changed every time the state tree changes, and so trigger an unnecessary re-render.

Wenn Ihre App hohe Leistung erfordert, haben Sie Immutable.js in Ihren Dumb-Komponenten mit ihren get() und getIn() Helfern zu verwenden.

Also since ImmutableJS has versatile API, in most cases it removes the need for helper libraries like lodash.

Aber es mosts Fällen können Sie den Code verwenden sie Immutable.js Ihrer Komponenten durch Leistungseinbußen zu trennen vorgeschlagen.

A HOC Komponente (mit dem neuesten immutable.js des isIterable Prädikat verwendet wird):

import React from 'react'; 
import { Iterable } from 'immutable'; 

export const toJS = (WrappedComponent) => 
    (wrappedComponentProps) => { 
     const KEY = 0; 
     const VALUE = 1; 

     const propsJS = Object.entries(wrappedComponentProps) 
      .reduce((newProps, wrappedComponentProp) => { 
       newProps[wrappedComponentProp[KEY]] = 
        Iterable.isIterable(wrappedComponentProp[VALUE]) 
         ? wrappedComponentProp[VALUE].toJS() 
         : wrappedComponentProp[VALUE]; 
       return newProps; 
      }, {}); 

     return <WrappedComponent {...propsJS} /> 
    }; 

A HOC Komponente (mit dem neuesten unveränderlich.js mit dem Prädikat isImmutable):

import React from 'react'; 
import { isImmutable } from 'immutable'; 

export const toJS = (WrappedComponent) => 
    (wrappedComponentProps) => { 
     const KEY = 0; 
     const VALUE = 1; 

     const propsJS = Object.entries(wrappedComponentProps) 
      .reduce((newProps, wrappedComponentProp) => { 
       newProps[wrappedComponentProp[KEY]] = 
        isImmutable(wrappedComponentProp[VALUE]) 
         ? wrappedComponentProp[VALUE].toJS() 
         : wrappedComponentProp[VALUE]; 
       return newProps; 
      }, {}); 

     return <WrappedComponent {...propsJS} /> 
    }; 

Wie verwenden:

import { connect } from 'react-redux'; 

import { toJS } from './to-js'; 

import DumbComponent from './dumb.component'; 

const mapStateToProps = (state) => { 
    return { 
     /** 
     obj is an Immutable object in Smart Component, but it’s converted to a plain 
     JavaScript object by toJS, and so passed to DumbComponent as a pure JavaScript 
     object. Because it’s still an Immutable.JS object here in mapStateToProps, though, 
     there is no issue with errant re-renderings. 
     */ 
     obj: getImmutableObjectFromStateTree(state) 
    } 
}; 

export default connect(mapStateToProps)(toJS(DumbComponent)); 

Es gibt eine Menge von Links des Redux immutable-js-best-practices Dokumentationsabschnitt zu bewegen in.