從REDX內部訪問服務器的道具？

我正在嘗試使用redux,react-engine和react-router。從REDX內部訪問服務器的道具？

我遇到的問題或問題是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> 
) 
}

來源

2016-04-06 ThomasReggi

錯在當你'<提供者儲存= {存儲}> ...'？ – VonD

@VonD此錯誤：'無法在「連接（應用）」的上下文或道具中找到「存儲」。將根組件包裝在中，或明確地將「store」作爲道具傳遞給「Connect（App）」。 – ThomasReggi

@VonD更新了我的代碼的外觀： – ThomasReggi

好像我需要包裝的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> 
) 
}

這是超級難看：/

來源

2016-04-06 14:39:33 ThomasReggi

從REDX內部訪問服務器的道具？

回答

相關問題