2016-12-15 104 views
2

我想補充一些「邏輯組件」我的場景的頂層。頂級組件根場景/路由器反應本地路由器通量

即我得到的:

<Router> 
    <Scene key="root" hideNavBar={true}> 
     <Scene key="home" component={HomeContainer} /> 
     <Scene key="search" component={SearchContainer} /> 
     <Scene key="list" component={ListContainer} /> 
     ... 
    </Scene> 
</Router> 

每個容器連接到終極版,使用連接()(),每個有它自己的減速器只需要自己那。

即:

export default connect(mapStateToProps, mapDispatchToProps)(HomeContainer) 

那麼,我需要做的就是「根」場景連接到終極版,並給它一般減速(也即所有其它場景依賴於一個) 。 但是,隨着這一點,我想使用componentDidUpdate,componentWillReceiveProps ...來監聽,即Netinfo在連接發生變化時更新Reducer的狀態。

我不知道它是否清晰與否,我希望它是。如果您需要更多信息,只需詢問他們。

感謝您的幫助

解決方案

看atlanteh的回答,並期待在文檔它說一切都需要:) https://github.com/aksonov/react-native-router-flux/tree/master/docs

我這裏一切正常的最終解決方案是:

const ConnectedRouter = connect()(Router) 

const scenes = Actions.create(
    <Scene key="root" hideNavBar={true}> 
     <Scene key="home" component={HomeContainer} /> 
    </Scene> 
) 

class ReduxRouter extends Component { 
    componentWillReceiveProps(newProps) { 
     if(!newProps.isConnected) { 
      // logic 
     } 
    } 
    render() { 
    return (
     <ConnectedRouter scenes={scenes} {...this.props}/> 
    ) 
    } 
} 

const mapStateToProps = (state) => { 
    return { 
    // State 
    } 
} 

const mapDispatchToProps = (dispatch) => { 
    return bindActionCreators({ 
    // Actions 
    }, dispatch); 
} 

export default connect(mapStateToProps, mapDispatchToProps)(ReduxRouter); 

這是bas特別是我以前嘗試過的所有東西的組合,它非常棒!沒有「密鑰xxx已經定義」或任何其他。

回答

3

你可以做這樣的事情:

class MyRouter extends React.Component { 
    componentWillReceiveProps(newProps) { 
     if(!newProps.network.isActive) { 
      // do something here 
     } 
    } 
    render() { 
     <Router> 
      <Scene key="root" hideNavBar={true}> 
       <Scene key="home" component={HomeContainer} networkActive={this.props.network.isActive} /> 
       <Scene key="search" component={SearchContainer} /> 
       <Scene key="list" component={ListContainer} /> 
       ... 
      </Scene> 
     </Router> 
    } 
} 
const mapStateToProps = state => state; 
export default connect(mapStateToProps)(MyRouter); 

你這個組件爲您的路由器,所以現在你有一個已連接到狀態的路由器。

請注意,您也可以反應本地路由器通量連接狀態,並且將派遣它的導航:

const ConnectedRouter = connect()(Router); 

編輯 - 避免鍵已經被定義

爲了避免已經定義鍵,你可以使用:

const scenes = Actions.create(
    <Scene key="root" hideNavBar={true}> 
     <Scene key="home" component={HomeContainer} networkActive={this.props.network.isActive} /> 
     <Scene key="search" component={SearchContainer} /> 
     <Scene key="list" component={ListContainer} /> 
     ... 
    </Scene> 
) 

,然後在路由器:

<ConnectedRouter 
    scenes={scenes} 
/> 
+0

這是我試過的東西,但我有「密鑰xxx已經定義」,我讀到,它會更好地避免這種情況...但是,你說的是真正的問題,當我嘗試它時, t刷新我的其他組件(場景)。每個容器都已連接,...不知道爲什麼:/ – Leon

+0

查看已更新的關鍵答案已經定義..我不明白你的評論的其他部分..你是什麼意思,它沒有更新你的場景? – atlanteh

+0

關於你最近的更新,這實際上工作,但與那我怎樣才能仍然使用組件方法?我查看了文檔,並且已經嘗試了所有內容(如第一個和第二個答案)。通過「它沒有更新我的場景」我的意思是,當reducer的狀態改變時,它不會刷新其他場景道具(但我可以看到該動作已經完成了日誌)。感謝您的幫助,非常感謝! – Leon

0

如果要更新的存儲在正確的數據,任何連接的數據應該刷新。

如果你能看到動作/減速運行,但所連接的部件從來沒有重新渲染,那麼你在減速最有可能的突變狀態和連接部件從未注意到的數據變化。

如果您在店裏修改深度嵌套的屬性,然後我強烈建議ImmutableJS。

相關問題