从 redux 中访问服务器道具？答案

【问题标题】：Access server props from within redux?从 redux 中访问服务器道具？
【发布时间】：2016-04-06 13:45:46
【问题描述】：

我正在尝试使用redux、react-engine 和react-router。

我遇到的问题是react-engine 提供了一个来自服务器的props 对象。如何从我的 ProvidedApp 中访问这些道具？

ProvidedApp.js

import React from 'react'
import { connect, Provider } from 'react-redux'
import App from './app'
import { mapStateToProps, mapDispatchToProps, store } from './redux-stuff'

// Connected Component
let ConnectedApp = connect(
  mapStateToProps,
  mapDispatchToProps
)(App)

let ProvidedApp = () => (
  <Provider store={store}>
    <ConnectedApp/>
  </Provider>
)

export default ProvidedApp

Routes.js

import React from 'react'
import { Router, Route } from 'react-router'

import Layout from './views/Layout'
import App from './views/ProvidedApp'

module.exports = (
  <Router>
    <Route path='/' component={Layout}>
      <Route path='/app' component={App} />
      <Route path='/app/dev' component={App} />
    </Route>
  </Router>
)

我还认为我的配置有点不稳定，我无法让Provider 以任何其他方式工作。如果有办法让Provider 包装Router，我很乐意让它工作。

这是我将Provider 移动到Router 上方时的一些代码

ConnectedApp.js

import React from 'react'
import { connect, Provider } from 'react-redux'
import App from './app'
import { mapStateToProps, mapDispatchToProps} from './redux-stuff'

let ConnectedApp = connect(
  mapStateToProps,
  mapDispatchToProps
)(App)

export default ConnectedApp

Routes.js

import React from 'react'
import { Provider } from 'react-redux'
import { Router, Route } from 'react-router'
import { store } from './redux-stuff'

import Layout from './views/Layout'
import App from './views/ConnectedApp'

module.exports = (
  <Provider store={store}>
    <Router>
      <Route path='/' component={Layout}>
        <Route path='/app' component={App} />
      </Route>
    </Router>
  </Provider>
)

我收到此错误：

Could not find "store" in either the context or props of "Connect(App)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(App)".

更新

我发现我可以从ProvidedApp 中的第一个示例中的代码访问。但我不知道我应该如何将它传递给 Redux。

let ProvidedApp = (props) => {
  console.log(props)
  return (
    <Provider store={store}>
      <ConnectedApp/>
    </Provider>
  )
}

【问题讨论】：

<Provider store={store}><Router> ... </Router></Provider> 时出了什么问题？
@VonD 这个错误：Could not find "store" in either the context or props of "Connect(App)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(App)".
@VonD 更新了我的代码：(
好的。你使用的是什么版本的 React 和 react-redux？你确定只有一个版本的 React 被使用吗？ github.com/reactjs/react-redux/blob/master/docs/…
你在服务器上实例化了 Redux 存储吗？我可能弄错了，但这看起来像客户端代码，也就是说，似乎没有一个从react-dom/server 导入renderToString，这是在服务器端使用的。不知道你有没有遇到过：redux.js.org/docs/recipes/ServerRendering.html

标签： javascript reactjs redux react-engine

【解决方案1】：

似乎我需要像这样包装reducer和store并将ServerProps传递到默认状态。

let getDefaultState = (serverProps) => {
  return {
    'appName': serverProps.appName 
  }
}

let getReducer = (serverProps) => {
  let defaultState = getDefaultState(serverProps)
  return (state = defaultState, action) => {

  }
}

let getStore = (serverProps) => {
  let reducer = getReducer(serverProps)
  return store = createStore(reducer)
}

let ConnectedApp = connect(
  mapStateToProps,
  mapDispatchToProps
)(App)

let ProvidedApp = (serverProps) => {
  return (
    <Provider store={getStore(serverProps)}>
      <ConnectedApp/>
    </Provider>
  )
}

这太丑了：/

【讨论】：