Redux：使用组合的 reducer 和 store enhancer 传递预加载状态

Question

我创建了一个具有 reducer 和 enhancer 功能的 redux store。

    const store = createStore(rootReducer, compose(
      applyMiddleware(thunk),
      DevTools.instrument()
    ))

rootReducer 使用 combineReducers 创建单个根减速器。我想在商店中初始化 window 的位置值，所以我尝试了这样的事情：

 const initialWindowLocation = window.location.hostname
 const store = createStore(rootReducer, initialWindowLocation, compose(
      applyMiddleware(thunk),
      DevTools.instrument()
 ))

我将商店连接到 redux 表单，我可以通过 mapStateToProps 获取所有 reducer 值 但是我无法尝试访问一个简单的字符串值(i.e.initialWindowLocation)来自 redux createStore。我缺少一些 redux 技巧吗？

此外，如果我尝试这样做，我会遇到意外的键错误：

 Unexpected key found in previous state received by the reducer.

对此有什么想法吗？提前致谢。

Answer 1

根据 redux docs here,

createStore(reducer, [preloadedState], [enhancer])

[preloadedState] (any): The initial state. You may optionally specify it to hydrate the state from the server in universal apps, or to restore a previously serialized user session. If you produced reducer with combineReducers, this must be a plain object with the same shape as the keys passed to it. Otherwise, you are free to pass anything that your reducer can understand.

最好再创建一个reducer。

const window = ( state = window.location.hostname,action )=>state;

并将其添加到 combineReducers 列表。

编辑：

I'm wondering why passing in the plain object as the second argument to the createStore doesn't work

假设你的 rootReducer 看起来像这个。

const window = (state = { location: "test" }, action) => state;
const user = (state = "", action) => state;
const rootReducer = combineReducers({ window, user });

当你说 "passing in the plain object as the second argument to the createStore" 时，它的意思是，preloadedstate 应该匹配 reducer 默认状态。

preloadedstate = { user: [], window: { location: "windowone" }}`

const store = createStore(rootReducer, { user: [], window: { location: "windowone" } }, applyMiddleware(...middleWare));

否则，你会得到一个错误Unexpected key found in previous state received by the reducer.，因为在 reducer 中没有定义这样的键。

Redux：使用组合的 reducer 和 store enhancer 传递预加载状态

Redux: Passing a preloadedstate with combined reducer and store enhancer

reactjs

react-router

redux

redux-form

react-redux