2016-10-04 90 views
1

我發現這個問題,這說明正是我一直在尋找...通行證對象反應路由器

Pass object through Link in react router

是否有可能通過在react-鏈接組件傳遞對象路由器?

喜歡的東西:

<Link to='home' params={{myObj: obj}}> Click </Link> 

以同樣的方式,我會從父到子組件通過道具。

如果它不可能實現這個目標的最佳方式是什麼: 我有一個React + Flux應用程序,我用一些數據呈現表格。我想要做的是當我點擊其中一行時,它會帶我到這一行的一些細節組件。該行有我需要的所有數據,所以我認爲如果我能夠通過鏈接傳遞它將會很棒。

另一種選擇是傳遞url中行的id,在details組件中讀取它,並通過ID從存儲中請求數據。

不知道什麼是實現上述的最佳途徑......

我同意作者的結論,意思是:不是傳遞對象,我們應該通過一個ID。然而,我正在努力尋找下一個組件,我應該執行查找,可能在我定義mapDispatchToProps的onload方法中。

但是,我不知道如何從那裏訪問狀態來查看對象是否處於狀態,以便我可以從api調用中檢索它,如果它不處於狀態。這是屬於這裏還是屬於行動?如果是在行動中,我該如何得到它。這似乎是一個非常基本的模式,我錯過了一些東西。

回答

0

您可以將其與redux-thunk一起使用,您可以爲路由器執行操作。

我的意思是這樣

export const boundAllStreams = (nextState, replaceState) => reqStreams(nextState.params.game); 

所以你可以看到我使用PARAMS遊戲,並與

export const reqStreams = game => { 

    const promise = new Promise((resolve, reject) => { 
    request 
     .get(`${config.ROOT_URL}/${game}&client_id=${config.API_KEY}`) 
     .end((err, res) => { 
     if (err) { 
      reject(err); 
     } else { 
      resolve(res.body.streams); 
     } 
     }); 
    }); 

    return { 
    type: types.RECEIVE_STREAMS, 
    payload: promise 
    }; 

}; 

這裏,這是我的減速器在那裏我得到了我的PARAMS從路由器改變狀態行動。


在你需要做這樣的事情之後,你綁定你的動作並使它成爲一個對象。

const boundRouteActions = bindActionCreators(routeActions, store.dispatch); 

最後在路由器中,你可以派遣從反應路由器

 <Route path=":game"> 
     <IndexRoute 
      component={StreamsApp} 
      onEnter={boundRouteActions.boundAllStreams} /> 
    </Route> 

希望能與API的OnEnter的動作,可以幫助你)。我知道我只是向你展示代碼,但我敢肯定,可以幫助你想出如何實現這一點;)