Zugriff auf andere Teile des Staates in Redux Reducer

Question

Ich verwende Redux und möchte ein Flag in den Zustand setzen, wenn der Benutzer Daten geändert hat.

Zuerst bin ich feuchtigkeitsspend meinem Speicher mit einigen Daten vom Server:

let serverData = {toggle: true} 
const store = configureStore({data: serverData, originalData: serverData}) 

ich dann ein paar Reduzierungen haben:

function data(state = {}, action) { 
    switch (action.type) { 
    case TOGGLE: 
     return { 
     ...state, 
     toggle: !state.toggle 
     } 
    default: 
     return state 
    } 
} 

function changed(state = false, action) { 
    // This doesn't work; we are actually comparing state.changed.originalData and state.changed.data 
    return isEqual(state.originalData, state.data) 
} 

const rootReducer = combineReducers({ 
    data, 
    originalData: (state={}) => state, 
    changed 
}) 

Was Ich mag würde hier tun gesetzt wird, um die changed Flag auf "True", wenn state.data nicht länger state.originalData entspricht. Mit combineReducers kann ich jedoch nicht auf diese Teile des Zustands in meinem changed Reducer zugreifen.

Was ist der idiomatische Weg, dies zu tun?

Answer 1

Michelle hat Recht, um es in traditionellen Flux-Begriffen zu erweitern, denken Sie an einen Reducer als ein Geschäft, Sie haben gerade einen Ihrer Filialen "Daten" und eine andere "geändert" - das ist nicht semantisch und zeigt Ihnen wahrscheinlich verwirrt sind wie sie benutzt werden.

Ihre changed Minderer sollten entweder den unveränderten Zustand zurückzukehren, oder, wenn eine Aktion gemacht wurde, dass es in, geben Sie den nächsten Zustand interessiert. Es ist nicht für herauszufinden, ob Ihr Geschäft geändert wurde - das ist, was subscribe ist. einmal, mit einer Aktion von @@redux/INIT

const unsubscribe = store.subscribe(() => 
    console.log('store was changed:', store.getState()) 
) 

Wenn Sie combineReducers nennen es wird jeden Minderer nennen - aber nicht selbst mit, dass betreffen, wie es intern ist. Das Wichtige, was zu verstehen ist, ist, dass unter jeder Reduzierung der Zustand initialisiert wird. In Ihrem Fall initialisierten Sie data zu einem leeren Objekt, changed zu false und originalData zu einem leeren Objekt.

Weiter, als Sie createStore anriefen, sagten Sie "Aktualisieren Sie die 'Daten' und 'OriginalData' speichert mit diesem Anfangszustand vom Server". Der Status der Datenspeicher 'und' serverData 'ist nun gleich {toggle: true}.

An diesem Punkt sind beide Objekte identisch.

Anschließend, wenn Sie anrufen store.dispatch alle Reduzierungen so genannt werden, dass sie eine Chance Zustand zu ändern haben können (und ein neues Objekt zurück) unter jedem Minderer Schlüssel. Jeder Reducer hat nur Zugriff auf seinen eigenen Status. Deshalb können Sie in Ihrem changed Reducer nicht die gesamte Objektgleichheit Ihres gesamten Status überprüfen.

Sie können jedoch für Objektgleichheit überprüfen in der Zeichnung (gemischte ES5/6 hier für Chrome 47)

'use strict'; 

const serverData = {toggle: true}; 
const TOGGLE = 'TOGGLE'; 

function data(state, action) { 
    state = state || {}; 
    switch (action.type) { 
    case TOGGLE: 
     return Object.assign({}, state, { 
     toggle: !state.toggle 
     }) 
    default: 
     return state 
    } 
} 

function originalData(state) { 
    state = state || {}; 
    return state; 
} 

const rootReducer = Redux.combineReducers({ 
    data, 
    originalData 
}); 

const store = Redux.createStore(rootReducer, {data: serverData, originalData: serverData }); 

const unsubscribe = store.subscribe(() => 
    console.log('on change equal?', store.getState().data === store.getState().originalData) 
) 

console.log('on load equal?', store.getState().data === store.getState().originalData); 

store.dispatch({ type: TOGGLE }); 

Die console.log ausgegeben werden soll:

on load equal? true 
on change equal? false 

Fiddle: https://jsfiddle.net/ferahl/5nwfqo9k/1/