Redux: So initialisieren Sie Redux mit unveränderlichem Objekt

Ich denke, was du willst, ist so etwas

// stores/some-store.js
import Immutable from 'immutable'

const { Map, List, fromJS } = Immutable
const initialState = Map({
  foo: 'bar',
  fooList: List()
})

export function someStore (state = initialState, action) {
  if (action.type === 'FOO') {
    return state.set('foo', fromJS(action.foo))
  }
  if (action.type === 'FOO_LIST') {
    return state.set('fooList', fromJS(action.fooList))
  }

  return state
}

// stores/index.js
export { default as someStore } from './some-store'

// application.js
import * as stores from './stores'

const redux = createRedux(stores)

Sie sollten die Geschäfte ihren eigenen Anfangszustand mit Standardparametern definieren lassen, wie @emmenko gezeigt hat.

Das Argument initialState soll nur zur Rehydratisierung des Status vom Server oder localStorage verwendet werden. ( @acdlite , wir möchten dies möglicherweise in Dokumenten erklären.)

Das heißt, was Sie versucht haben, sollte funktionieren. Kann jemand nachforschen?

Nein, was ich versucht habe, funktioniert nicht. Ich möchte nur Anfangsdaten für alle Geschäfte an einem Ort erstellen. Ich denke, das sollte ich nicht tun.

Ich möchte nur Anfangsdaten für alle Geschäfte an einem Ort erstellen. Ich denke, das sollte ich nicht tun.

Es liegt an dir. Ich finde es besser, die Anfangsdaten zu teilen.

Wenn etwas nicht funktioniert, lassen Sie es trotzdem offen? Ich werde nächste Woche wiederkommen und sehen, warum es nicht funktioniert hat.

Das Problem liegt bei composeStores , bei dem angenommen wird, dass der Stammstatus ein einfaches JS-Objekt ist, und beim Zugriff auf die Eigenschaften mit state[key] , was mit Immutable.Map fehlschlägt. Ich denke, es könnte mit Immutable.Record funktionieren, da dies die Felder über reguläre JS-Eigenschaften zugänglich macht.

Es kann jedoch auch andere Stellen geben, an denen ein einfaches Objekt angenommen wird.

Oh. Das ist ein toller Fang! Danke für die Erklärung. Das macht durchaus Sinn.

Die Verwendung von Konnektoren schlägt aus demselben Grund ebenfalls fehl: isPlainObject(Immutable.Record) === false .

@pierregm Das ist eigentlich richtig. Wenn es die Record-Eigenschaften auf die Komponenten-Requisiten verteilt, funktioniert das sowieso nicht. Es liegt an Ihnen, select={state => state.get('something').toJS()} zu schreiben.

Ich konnte es so zum Laufen bringen,

// store
const initialState = Immutable.fromJS({}).toOrderedMap();

export default function streamStore(state = initialState, action) {
  switch (action.type) {

    case actionTypes.FETCH_STREAM_DONE:
      var streamMap = {};

      for (var i in action.stream_data) {
        var item = action.stream_data[i];
        streamMap[item.id] = item;
      }
      return state.merge(Immutable.fromJS(streamMap).toOrderedMap());

    default:
      return state
  }
};

// select
function select(state) {
  return {stream: state.stream.toList()}
}

Es funktioniert perfekt, aber am Ende werden alle Elemente im Stream neu gerendert (eine Listenansicht). Ich habe mich gefragt, wie man etwas implementieren kann, das den alten Status mit dem neuen Status auf Filialebene vergleicht und die Notwendigkeit ungültig macht, Komponenten genau dort zu rendern, wenn keine Änderungen an den Daten vorgenommen werden. NuclearJS macht dies mit unveränderlichen Strukturen. Was wäre der empfohlene Weg, um so etwas in Redux zu implementieren?

@owais

Schauen Sie sich Reselect an: https://github.com/faassen/reselect. Es bietet ähnliche Funktionen wie NuclearJS-Getter.

@gaearon Cool! Tolles Gespräch bei ReactEurope BTW! Vielen Dank.

Dies ist mein Versuch, Immutable.js mit Redux 1.0.0, https://github.com/gajus/redux-immutable, zu verwenden

Schön @gajus! Testen Sie jetzt redux-immutable und mögen Sie das Muster https://github.com/gajus/canonical-reducer-composition

Vielen Dank, dass Sie @chiplay. Ich würde mich sehr über Feedback freuen, wenn Sie auf Mängel stoßen oder Verbesserungsvorschläge haben.

Gibt es einen Vorteil der Verwendung unveränderlicher Strukturen zusammen mit Redux? Wenn der Redux auf unveränderlichem Verhalten basiert (z. B. Geschäfte geben eine neue Kopie des Status zurück)? Leistung (irgendwelche Benchmarks?)? oder etwas anderes? Danke

@ jsifalda

Vorteile der Verwendung von Immutable mit Redux:

• Sie können nicht versehentlich mutieren
• Viel schnellere Leistung und besserer Speicherverbrauch bei großen Arrays und Objekten

Nachteile der Verwendung von Immutable mit Redux:

• Neue API zum Lernen für Ihr Team
• Erhöhte Bündelgröße
• Etwas schwieriger zu debuggen

Der Kompromiss liegt bei Ihnen!

@gaearon
Vielen Dank für die schnelle und hilfreiche Antwort!

Wenn Sie ImmutableJs & Redux möchten, das den Redux-Standards entspricht, können Sie einen Blick auf https://github.com/indexiatech/redux-immutablejs werfen.

@gaearon Ist es möglich, einen Link auf die Website zu setzen?

Danke Asaf. Ich bin sicher, die Leute werden es nützlich finden.

Am 4. September 2015 um 18:36 schrieb Asaf Shakarchi [email protected] :

Wenn Sie ImmutableJs & Redux möchten, das den Redux-Standards entspricht, können Sie einen Blick auf https://github.com/indexiatech/redux-immutablejs werfen.

@gaearon Ist es möglich, einen Link auf die Website zu setzen?

- -
Antworte direkt auf diese E-Mail oder sieh sie dir auf GitHub an.

@asaf

Gutes Zeug, möchtest du eine PR für Ecosystem.md ?
Ich werde es dort gerne hinzufügen, wenn Sie Ihrem Projekt Tests hinzufügen.

@gaearon Mit Unit-Tests fertig, PR ist: https://github.com/rackt/redux/pull/707

Vielen Dank!

Hallo zusammen,
Eine kleine Frage an @gaearon :

Grundlegender Anwendungsfall: Abrufen einer Sammlung von Daten aus einem API-Aufruf und Speichern in einem Reduzierer ...

Von meinem Reduzierer,
Ohne unveränderlicheJS:

const initialStore = {
    isLoading : false,
    error     : null,
    data      : []
}

// in the switch case
return {
   ...state,
   isLoading: false,
   error: null,
   data: action.result
}

Mit ImmutableJS

const initialStore = Map({
    isLoading : false,
    error     : null,
    data      : List()
})

// in the handler function
return state.merge({
    isLoading: false,
    error: null,
    data: List(result.result)
})

Ich frage mich, ob die "Behandlung", die ImmutableJS durchführt, hier nicht mehr kostet.

Nach dem, was ich unter Unveränderlichkeit verstehe, ist der Vorteil größer, wenn das Rendern schnell einsetzt, oder?

Vielen Dank für Ihr Feedback.

Der Vorteil besteht darin, dass der Betrieb großer Arrays und Objekte weniger Speicher kostet und schneller arbeitet. Bei kleinen Anwendungen macht es keinen großen Unterschied.

OK danke.
Also habe ich trotzdem den richtigen Ansatz?

Ja, sieht gut aus für mich.

Bisher hat sich der Kompromiss gelohnt .. 💯