reduxでは、combineReducersを使用したプリロード状態

Question

私はちょうどreduxに導入されており、しばらく前に状態をプリロードするという問題に悩まされています。

単一のレデューサーを使用しているときは、次のコードを使用していましたが、正常に動作していました。関連するスニペット::

const head = (state = {}, action) => { 
switch (action.type) { 

    case 'TOGGLE_VISIBLITY': 
    if (state.head.content !== action.id) { 
     return state 
    } 
    state.body.visible = !state.body.visible; 
    return state; 

    default: 
     return state 
    } 
} 

const heads = (state = [], action) => { 
    switch (action.type) { 
     case 'TOGGLE_VISIBLITY': 
    state.body = state.body.map(t => 
    head(t, action) 
); 
} 
return state; 
} 

export const store = createStore(heads, config); 

代わりに、これを私はcombinerReducersに変更しましたが、JSエラーが発生しました。

予期しないキー "head"、 "body"がpreloadedState引数にあり、createStoreに渡されました。代わりに、既知のレデューサーキーの1つ、「ヘッド」を見つけることが期待されます。予期しないキーは無視されます。

私の変更は::あなたが完全なコードを確認したい場合は

const plannerApp = combineReducers({ 
    heads 
}); 

export const store = createStore(plannerApp, config); 

た、hereをご覧ください。

助けを借りると非常に感謝します。おかげさまで、私はあなたの時間と努力を感謝します...

Answer 1

要するに、プリロード状態は、あなたのレデューサーの構造と一致する必要があります。 combineReducersに切り替えたので、状態ツリー構造が変更されました。あなたは今bodyの子キーを持っているheadsのトップレベルのキーを持っているので、あなたは、おそらくのように見えるためにあなたのconfigを更新する必要があります。

export default { 
    heads: { 
    body: { 
     ... 

それが今であるため、configオブジェクトがheadのトップレベルのキーが含まれていますbodyには、状態ツリーの最上位にエントリがありません。