如何將初始狀態傳遞給減速器

Question

我目前使用一個減速器創建了我的商店，其中初始狀態已傳遞給它。

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時能夠通過這個過程？

解決方案：

按照丹尼爾·里爾登的建議，我需要我的減速器鑰匙匹配到我的初始狀態。

我的初始化狀態看起來像：

{ 
    "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 
    } 
} 

所以我減速看起來是這樣的：

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減速只獲得頁面切開我的初始化狀態的。

Answer 1

這不是你想象的那樣工作的原因是因爲你已經改變了你的狀態結構以及傳遞給你原來的reducer的結構。凡在你的店看起來是這樣的：

{ 
loadUI: true 
isNoMatch: false 
} 

現在，你已經基本上告訴終極版尋找：

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

當您使用combineReducers，你基本上是爲您創造狀態隔離域 - - 而不是將整個狀態傳遞給每個reducer，redux將只傳遞給每個reducer的一個狀態，reducer將只能修改該狀態的切片。通過如上所示構建您的商店，您告訴REDX只會將狀態的apollo切片傳遞給阿波羅減速器......以及狀態的reducers部分到原始減速器。

我猜你還沒對preloadedState做過任何修改。因此，REDX正在尋找名爲reducers的preloadedState的房產，並將其交給您的減員。它找不到一個，所以它通過未定義。

最簡單的修復方法是，首先，選擇比reducers更具描述性的內容 - ui也許？相應地更換您的combineReducers。然後更新您的preloadedState，以便您擁有的任何初始狀態都嵌套在ui之內。然後它應該按預期工作。請記住，您需要更新選擇器和/或mapStateToProps功能！

編輯：您可能想了解更多有關combinereader如何工作here。