Redux redüktöründe durumun diğer parçalarına erişim

Question

Redux kullanıyorum ve kullanıcının verileri değiştirmiş olması durumunda eyalette bir bayrak ayarlamak istiyorum.

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

Sonra birkaç düşürücüler var

: Burada yapmak istiyorum ne

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 
}) 

changed ayarlanır

Önce sunucudan bazı verilerle benim mağaza nemlendiricili ediyorum gerçek state.data eğer bayrak artık state.originalData eşittir. Ancak, combineReducers kullanarak, benim changed redüktör içindeki devletin bu parçaları erişemez.

Bunu yapmanın en akılcı yolu nedir?

Answer 1

Michelle haklı olarak, geleneksel akı terimlerinde bir redükleyiciyi bir mağaza olarak düşünürken, mağazalarınızdan birini "veri" ve başka bir "değişti" olarak adlandırırsınız. Bu, semantik değildir ve muhtemelen kafanızın karıştığını gösterir. nasıl kullanılıyorlar. Bir eylem o sonraki devlet dönmek, ilgilenen olduğunu yaptıysanız

Sizin changed redüktör, değiştirilmemiş devlet dönmek ya mı, yoksa edilir. Mağazanız değişip değişmediğini anlamak için değil - subscribe bunun için. ama iç olduğu gibi bu konuda kendini ilgilendirmeyen -

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

bunu @@redux/INIT bir eylem ile bir kez her redüktör arayacak combineReducers diyoruz

. Anlaşılması gereken en önemli şey, her redüktör anahtarının altında devletin başlatılmasıdır. Sizin durumunuzda boş bir nesneye data, false için changed ve boş bir nesneye originalData başlattınız.

createStore numaralı telefonu aradığınızda, "Bu 'başlangıç ​​durumu' ve 'originalData' depolarını sunucudan güncelle" dediniz. Yani şimdi 'veri' ve 'serverData' depolarının durumu {toggle: true}'a eşittir.

Bu noktada, her iki nesne de aynıdır.

Daha sonra onlar durumunu değiştir (ve yeni bir nesne döndürür) anahtar her redüktör altında şansına sahip böylece store.dispatch tüm düşürücüler adı verilecek çağırdığınızda. Her redüktörün sadece kendi durumuna erişimi vardır. Bu nedenle, changed redüktörünüzde, tüm durumunuzun genel nesne eşitliğini bu şekilde kontrol edemezsiniz. Eğer nesne eşitlik için

kontrol edebilirsiniz Ancak abone (karma ES5 burada Chrome 47 için/6)

'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 }); 

console.log çıkışı olmalıdır:

on load equal? true 
on change equal? false 

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