Reduxレデューサーの州の他の部分へのアクセス

Question

私はReduxを使用しており、ユーザーがデータを変更している場合には状態にフラグを設定したいと考えています。

まず私は、サーバーからいくつかのデータと私の店を水和しています：

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

私はその後、いくつかの減速持っている：私はここでやってみたいことはchanged設定されている

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

をstate.dataがstate.originalDataに等しくない場合は、trueにフラグを設定します。しかし、combineReducersを使用して、私はchangedレデューサー内の状態のこれらの部分にアクセスすることはできません。

これを行う最も慣用的な方法は何ですか？

Answer 1

ミシェルは右ですが、伝統的なフラックスの点では、店舗としてレデューサーを考えると、ちょうどあなたの店「データ」と呼ばれ、別の「変更された」と呼ばれます。彼らはどのように使用されています。

あなたchanged減速が変更されていない状態を返す、または、アクションはそれが興味だと判断された場合、次の状態を返すようにどちらかと思われます。あなたの店が変わったかどうかは分かりません。それはsubscribeのためです。

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

あなたがcombineReducersを呼び出すとき、それは@@redux/INITのアクションで、一度各減速を呼び出します - しかし、それは内部だとしてそれを気はありません。理解しておくべき重要なことは、各減速キーの下で状態が初期化されることです。あなたのケースでは、空のオブジェクトにdataを初期化しました。changedをfalseに、originalDataを空のオブジェクトに初期化しました。

次は、createStoreを呼び出したときに、「データを更新し、元のデータがサーバーからこの初期状態で保存されます」と言いました。したがって、 'data'ストアと 'serverData'ストアの状態は{toggle: true}になります。

この時点では、両方のオブジェクトが同じです。

あなたがstore.dispatchを呼び出すとき、彼らはそれぞれの減速キー下の状態を変更する（新しいオブジェクトを返す）する機会を持つことができるように、その後、すべての減速が呼び出されます。各レデューサーは自分自身の状態にしかアクセスできません。したがって、あなたのchangedレデューサーでは、そのような州全体のオブジェクト全体の平等をチェックすることはできません。

あなたが購読（クローム47こちら混合ES5/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出力は次のようになります。

on load equal? true 
on change equal? false 

フィドル：https://jsfiddle.net/ferahl/5nwfqo9k/1/