如何将初始状态传递给减速器

我目前使用一个减速器创建我的商店，该减速器已传递给它初始状态。

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

现在我想使用另一个减速器，因为我试图将 Apollo 包含在我的项目中。根据http://dev.apollodata.com/react/redux.html http://dev.apollodata.com/react/redux.html我需要结合Reducers：即

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

所以我需要做这样的事情：

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

但随后我的减速器函数不再有权访问状态（它是未定义的）。当我使用combineReducers时，如何确保它被传递？

解决方案：

根据 Daniel Rearden 的建议，我需要将减速器的键与初始状态的键相匹配。

我的初始状态看起来像：

{
  "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减速器仅获取我的初始状态的页面切片。

这没有按您预期的方式工作的原因是因为您改变了状态的结构以及传递给原始减速器的内容。以前你的商店看起来像这样：

{
 loadUI: true
 isNoMatch: false
}

现在，您基本上已经告诉 Redux 寻找：

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

当你使用combineReducers时，你本质上是在为你的状态创建隔离域——而不是将整个状态传递给每个reducer，redux只会将状态的一部分传递给每个reducer，并且reducer只能改变它状态切片。通过如上所示构造你的 store，你已经告诉 redux 仅传递apollo状态切片到 apollo 减速器......以及reducers原始减速器状态的一部分。

我猜你还没有做任何改变preloadedState。所以发生的事情是 redux 正在寻找一个属性preloadedState called reducers并将其传递给您的减速器。它找不到一个，所以它传递的是未定义的。

这里最简单的解决方法是，首先，选择比reducers -- ui或许？相应地更改您的combineReducers。然后更新你的preloadedState这样无论你有什么初始状态都嵌套在里面ui。然后它应该按预期工作。请记住，您还需要更新选择器和/或 mapStateToProps 函数！

Edit:您可能想了解更多有关combineReducers如何工作的信息here http://redux.js.org/docs/recipes/reducers/UsingCombineReducers.html.