从redux中访问服务器道具
Access server props from within redux?
我正在尝试使用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>
)
}
似乎我需要包装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>
)
}
这太难看了:/
相关文章:
- 我无法使用angularJs($http)访问服务器
- 我如何设置HTTP头“;访问控制允许起源”;用于来自thttpd web服务器的HTTP响应
- 无法从Angular访问服务器端控制器
- 跨来源请求被阻止-如何在没有访问服务器的情况下绕过它
- 当通过Node.js服务器访问时,Javascript文件在Chrome上工作,但从文件夹打开时不工作
- 如何使用API从SMTP服务器访问和提取电子邮件
- WebDriver Selenium:Javascript代码覆盖范围,无需服务器访问
- 无法从本地node.js服务器访问mongolab中的集合
- 从电话间隙应用程序中的服务器访问本地存储数据
- 使用 AJAX JQuQuery 从远程服务器访问 PHP
- 从本地服务器访问本地网络上的客户端打印机
- 从另一节点服务器访问一个节点服务器
- 没有客户端访问权限的服务器访问文件
- 从node.js服务器访问google Roads API v3
- 从本地服务器访问API
- 如何使用grunt http服务器访问区域json文件(grunt-contrib-connect)
- 从服务器访问值.R到.js文件
- CORS, SQLite和JavaScript.任何不需要本地服务器访问实际数据库的方法
- 无法使用AngularJS从服务器访问该文件
- SecurityError:当我试图从其他服务器访问镜像时,操作是不安全的