Wie verwende ich Immutable.js mit Redux?

Redux Rahmen ist mit Reduzierstücke zu ändern, app-Zustand in Reaktion auf eine Aktion.

Die entscheidende Voraussetzung ist, dass ein Druckminderer nicht mehr ändern eines vorhandenen Status-Objekt; es darf produzieren einem neuen Objekt.

Schlechtes Beispiel:

import {
    ACTIVATE_LOCATION
} from './actions';

export let ui = (state = [], action) => {
    switch (action.type) {
        case ACTIVATE_LOCATION:
            state.activeLocationId = action.id;
            break;
    }

    return state;
};

Gutes Beispiel:

import {
    ACTIVATE_LOCATION
} from './actions';

export let ui = (state = [], action) => {
    switch (action.type) {
        case ACTIVATE_LOCATION:
            state = Object.assign({}, state, {
                activeLocationId: action.id
            });
            break;
    }

    return state;
};

Dies ist ein guter use-case für Immutable.js.

InformationsquelleAutor der Frage Gajus | 2015-08-08

Unter Ihrem guten Beispiel Unveränderlich

import {
    ACTIVATE_LOCATION
} from './actions';

import { Map } from 'immutable';

const initialState = Map({})

export let ui = (state = initialState, action) => {
  switch (action.type) {
    case ACTIVATE_LOCATION:
      return state.set('activeLocationId', action.id);
    default:
      return state;
  }
};

InformationsquelleAutor der Antwort Geoffrey Abdallah

23

Immutable.js verwendet werden sollte, in jedem reducer Bedarf, z.B.
```
import {
    ACTIVATE_LOCATION
} from './actions';

import Immutable from 'immutable';

export let ui = (state, action) => {
    switch (action.type) {
        case ACTIVATE_LOCATION:
            state = Immutable
                .fromJS(state)
                .set('activeLocationId', action.id)
                .toJS();
            break;
    }

    return state;
};
```
Jedoch, es ist eine Menge Aufwand in diesem Beispiel: jedes mal, wenn reducer Aktion aufgerufen wird, wird es zu konvertieren, JavaScript-Objekts, um eine Instanz des Unwandelbaren, mutieren Sie das resultierende Objekt und konvertieren es zurück zum JavaScript-Objekt.

Ein besserer Ansatz ist, um den ursprünglichen Zustand einer Instanz von Unveränderlich:
```
import {
    ACTIVATE_LOCATION
} from './actions';

import Immutable from 'immutable';

let initialState = Immutable.Map([]);

export let ui = (state = initialState, action) => {
    switch (action.type) {
        case ACTIVATE_LOCATION:
            state = state.set('activeLocationId', action.id);
            break;
    }

    return state;
};
```
Diese Weise werden Sie nur brauchen, um zu konvertieren der anfängliche Zustand auf eine Instanz von Immutable Unze. Dann wird jeder Abschwächer wird es behandelt, als eine Instanz der Immutable auf und übergeben es auf der ganzen Linie als eine Instanz von Immutable. Der Haken ist, dass jetzt müssen Sie zu werfen, der gesamte Staat, JavaScript, bevor die übergabe der Werte an den view-context.

Wenn Sie die Durchführung mehrerer state-Mutationen in einem reducer, möchten Sie vielleicht zu prüfen, Dosier-Mutationen mit .withMutations.

Dinge einfacher machen, die ich entwickelt habe, eine redux-immutable Bibliothek. Es bietet combineReducers Funktion das ist äquivalent zu der Funktion mit dem gleichen Namen in der redux-Paket, außer dass Sie erwarten, dass der Anfangszustand und alle Reduzierstücke arbeiten mit Immutable.js Objekt.

InformationsquelleAutor der Antwort Gajus
8

Wenn Sie nur auf der Suche nach eine einfache Möglichkeit, um updates ohne mutation, die ich pflegen eine Bibliothek: https://github.com/substantial/updeep die, meiner Meinung nach, ist ein guter Weg, das zu tun, mit redux.

updeep ermöglicht Ihnen die Arbeit mit regulären (frozen) - Objekt-Hierarchien, so dass Sie tun können destructuring finden Sie Objekte in den Protokollen und den debugger, etc. Es hat auch eine leistungsfähige API, mit der für die batch-Aktualisierung. Es ist nicht so effizient wie Immutable.js für große Daten-sets, weil es Klon-Objekte, wenn es nötig ist.

Hier ist ein Beispiel (aber überprüfen Sie diese in der README-Datei für weitere Informationen):
```
import {
    ACTIVATE_LOCATION
} from './actions';
import u from 'updeep';

export let ui = (state = [], action) => {
    switch (action.type) {
        case ACTIVATE_LOCATION:
            state = u({ activeLocation: action.id }, state);
            break;
    }

    return state;
};
```
InformationsquelleAutor der Antwort Aaron Jensen

Akzeptiert die Antwort sollte nicht sein, die akzeptierte Antwort.
Sie brauchen, um zu initialisieren Status mit Hilfe unveränderlich und als wie zuvor erwähnt verwenden redux-immutablejs

const initialState = Immutable.fromJS({}) //or Immutable.Map({})

const store = _createStore(reducers, initialState, compose(
    applyMiddleware(...middleware),
    window.devToolsExtension ? window.devToolsExtension() : f => f
));

Als die combineReducers von redux-immutablejs

Extra-Tipp:
Mit reagieren-router-redux funktioniert ziemlich gut so, wenn Sie möchten, fügen Sie diese dann ersetzen Sie den Adapter von reagieren-router-redux:

import Immutable from 'immutable';
import {
    UPDATE_LOCATION
} from 'react-router-redux';

let initialState;

initialState = Immutable.fromJS({
    location: undefined
});

export default (state = initialState, action) => {
    if (action.type === UPDATE_LOCATION) {
        return state.merge({
            location: action.payload
        });
    }

    return state;
};

Einfach importieren Sie diese in Ihrem root-reducer

Dies ist auch in der Dokumentation erwähnt der redux-immutablejs

InformationsquelleAutor der Antwort Michiel

2

Werfen Sie einen Blick auf https://github.com/indexiatech/redux-immutablejs

Es ist ziemlich viel combineReducer und eine optionale createReducer entspricht mit Redux standards.

InformationsquelleAutor der Antwort asaf000

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.