在選擇器中訪問反應路由器狀態

我正將應用程序狀態的一部分從存儲移動到URL。在選擇器中訪問反應路由器狀態

我目前使用REDX來管理我的應用程序的狀態以及reselect來創建選擇器。選擇器從redux存儲中的狀態計算派生值（原則上，這是它們唯一的輸入）。

現在，部分狀態將包含在URL中，因此我不知道如何閱讀它。

我已經看過react-router-redux，乍看之下可能會出現是解決方案（事實上，我可以得到我想用state.routing.locationBeforeTransitions.query值），但這似乎並沒有要做到這一點的正道，因爲在他們的文檔中提到：

您不應直接從Redux存儲區讀取位置狀態。

是否有另一種方式可以訪問我的位置狀態，或者我應該忽略此警告並在選擇器中使用它？

來源

2016-09-21 Tom Fenech

您是否需要從mapStateToProps訪問路由器的參數？ –

@Utro從那裏調用選擇器，但想法是隻傳遞選擇器一個參數，即狀態對象。我想我可以添加我需要從路由器到狀態對象使用ownProps ... –

有辦法：1）在mapStateToProps中geting ownProps.params 2）在組件中：傳遞'this.props.params.someparam'到action 3）使用'redux-router'來保持路由器的狀態。 –

您是正確的，react-router-redux文檔似乎建議不要這樣獲取路由器狀態。

雖然Reselect選擇器通常只使用第一個參數（狀態），但他們實際上可以接受第二個參數（組件的道具）。在這些道具裏面，你會發現params被React Router傳遞（假設它們被傳遞給你正在嘗試的組件connect）。

我已經包括以下所有我做的是上殼體內的location一個簡單的例子，但你能想象讓複雜的選擇，只要你想，包括使用state得到的東西出了終極版的其他選擇商店。

const selectLocation = (_state, props) => props.location; 
const selector = createSelector(
    selectLocation, 
    (location) => ({ upperCasedLocation: location.toUpperCase() }) 
); 

const MySmartComponent = (props) => <div>{props.upperCasedLocation}</div>; 

export default connect(selector)(MySmartComponent);

來源

2016-09-22 03:06:03

在選擇器中訪問反應路由器狀態

回答

相關問題