初期状態をレデューサーに渡す方法

Question

私は現在、初期状態が渡された1つのレデューサーで自分の店を作成しています。

import reducers from './reducers' 

const store = createStore(
    reducers, 
    initialState, 
    compose(...enhancers) 
) 


// reducers.js 
export default function reducer(state, action) { 
    console.log('state', state) 
    switch (action.type) { 
    case 'LOAD_UI': 
     return Object.assign({}, state, { 
     loadUI: action.loaded 
     }); 
    case 'NO_MATCH': 
     return Object.assign({}, state, { 
     loadUI: true, 
     isNoMatch: action.isNoMatch 
     }); 
    default: 
     return state; 
    } 
} 

私は減速機能にして状態を記録するとき、私は私が私の店を設定する際に設定された状態を得る：

// if we are in production mode, we get the initial state from the window object, otherwise, when we are in dev env we get it from a static file 
const preloadedState = window.__INITIAL_STATE__ === '{{__PRELOADEDSTATE__}}' ? initialState : window.__INITIAL_STATE__ 

const store = configureStore(preloadedState) 

ReactDOM.render(
    <Provider store={store}> 
    <BrowserRouter> 
     <App /> 
    </BrowserRouter> 
    </Provider> 
, document.getElementById('root') 
) 

今、私は私には、しようとしているとして、他の減速機を使用したいです私のプロジェクトではアポロ。 http://dev.apollodata.com/react/redux.htmlによると、私はcombineReducersする必要があります。すなわち

combineReducers({ 
    todos: todoReducer, 
    users: userReducer, 
    apollo: client.reducer(), 
    }), 

だから私はこのように気にいらを行う必要がないだろう。（それは未定義である）

const store = createStore(
    combineReducers({ 
     apollo: client.reducer(), 
     reducer: reducers 
    }), 
    initialState, 
    compose(...enhancers) 
) 

しかし、その後、私の減速機能は、もはや状態へのアクセス権を持っています。 combineReducersを使用すると、これを確実に通過させることができますか？

ソリューション：

ダニエルReardenの提案を1として、私は私の初期状態のものに私の減速キーと一致する必要がありました。私pages減速がページだけが私の初期状態のスライスを取得ようにするため

import { combineReducers } from 'redux' 
import { ApolloClient } from 'react-apollo'; 

const client = new ApolloClient(); 

import articles from './articles' 
import pages from './pages' 
import services from './services' 
import clients from './clients' 
import people from './people' 
import offices from './offices' 
import menus from './menus' 
import settings from './settings' 

export default combineReducers({ 
    apollo: client.reducer(), 
    articles, 
    pages, 
    services, 
    clients, 
    people, 
    offices, 
    menus, 
    settings 
}) 

：

{ 
    "pages": [ 
    { 
     "id": 5, 
     "title": "About", 
     "slug": "about", 
     "path": "/about", 
     "template": "about", 
     "published": "2017-07-10 02:02:30", 
     "image": null, 
     "seo": { 
     "title": null, 
     "description": null, 
     "image": null, 
     "fbAdmins": null, 
     "gtm": null, 
     "schema": "" 
     }, 
     "sections": [ 
     ] 
    }, 
    { 
     "id": 10, 
     "title": "Contact", 
     "slug": "contact", 
     "path": "/contact", 
     "template": "contact", 
     "published": "2017-07-11 04:27:30", 
     "image": null, 
     "seo": { 
     "title": null, 
     "description": null, 
     "image": null, 
     "fbAdmins": null, 
     "gtm": null, 
     "schema": "" 
     }, 
     "sections": [] 
    }, 
    { 
     "id": 4, 
     "title": "Home", 
     "slug": "home", 
     "path": "/", 
     "template": "home", 
     "published": "2017-07-10 01:39:48", 
     "image": null, 
     "seo": { 
     "title": null, 
     "description": null, 
     "image": null, 
     "fbAdmins": null, 
     "gtm": null, 
     "schema": "" 
     }, 
     "sections": [] 
    } 
    ], 
    "services": [], 
    "clients": [], 
    "people": [], 
    "offices": [], 
    "articles": [], 
    "menus": { 
    "header": [ 
     { 
     "title": "Home", 
     "slug": "/" 
     }, 
     { 
     "title": "About", 
     "slug": "/about" 
     }, 
     { 
     "title": "Contact", 
     "slug": "/contact" 
     } 
    ] 
    }, 
    "settings": { 
    "site": { 
     "title": null, 
     "siteUrl": "" 
    }, 
    "logo": [], 
    "secondarylogo": [], 
    "favicon": [], 
    "disclaimer": null, 
    "tagline": null, 
    "social": null, 
    "email": null, 
    "phone": null, 
    "facebookAppId": "", 
    "seo": { 
     "title": null, 
     "description": null, 
     "image": null, 
     "fbAdmins": null, 
     "gtm": null, 
     "schema": "" 
    }, 
    "newsLetterSignUp": { 
     "image": "", 
     "title": "", 
     "content": "" 
    }, 
    "menu_settings": null 
    } 
} 

だから私の減速は、次のようになります。

私の初期状態のようなものが見えます。

Answer 1

あなたが期待していたようにこれがうまくいかない理由は、あなたが元のレデューサーに渡されるものだけでなく、あなたの国家の構造も変えたからです。お店はこのような何かに見えた前に、どこ：今

{ 
loadUI: true 
isNoMatch: false 
} 

を、あなたが探しにReduxのを基本的に言った：

{ 
apollo: { 
    // ✁ 
} 
reducers: { 
    loadUI: true 
    isNoMatch: false 
} 
} 

あなたがcombineReducersを使用する場合、あなたは基本的にあなたの状態のために孤立したドメインを作成しています - - 各レデューサーに状態全体を渡すのではなく、レフィックスは各レデューサーに状態スライスを渡すだけで、そのレデューサーはそのスライス状態を変更することができます。上記のようにあなたの店舗を構成することによって、reduxに、アポロレデューサーに状態のapolloスライスのみを渡して、元のレデューサーに状態のreducers部分を渡すように伝えました。

preloadedStateに変更を加えていないと思います。そこで起こっていることは、の資産を探して、reducersと呼んで、あなたのレデューサーにそれを渡すことです。それは見つからないので、定義されていません。

ここで最も簡単な修正は、まずreducers - uiよりも説明的なものを選択することです。それに従ってコンビネーションリダクターを交換してください。 preloadedStateを更新して、元の状態がuiにネストされているようにします。それは期待どおりに動作するはずです。セレクタやmapStateToProps関数を更新する必要があることに注意してください。

編集： combineReducersがどのように作用するのか詳しくは、hereをお読みください。