更改URL和調用redux動作以獲取反應減少應用程序中的數據

任何人都可以告訴我如何在使用react-router進行路由更改服務器端反應減少組件中的路由URL時如何調用動作。更改URL和調用redux動作以獲取反應減少應用程序中的數據

我正在使用瀏覽器歷史 react-router將我的輸入推送到url。

import React from 'react'; 
import { connect } from 'react-redux'; 
import { browserHistory } from 'react-router'; 

class findBirthdays extends Component { 
    constructor(props){ 
    super(props); 
    } 

    openCalender(){ 
    // here I open the date picker and let user select the date 
    // then I add that date in the URL as "localhost:3000/find/?date=22-02-2017" 
    // here I get confused as I do not know now how to dispatch the action or 
    // how to access url params in a specific actions after dispatching that action 
    } 

    render(){ 
    return (
     // repeating all the birthday that are available on selected date 
    ) 
    } 
} 

const mapStateToProps = (state) => { 
    return { 
    birthdayList: state.birthdays, 
    }; 
}; 

export default connect(mapStateToProps)(findBirthdays);

我有許多投入和每個輸入變化事件，將附加的URL，並且應該導致調度動作並得到正確的結果。

我是新來的反應和redux，所以如果任何人都可以建議，如果這可以做到或如何處理這個問題，這將是有益的。謝謝你們。

來源

2017-02-22 NitinD

所以你想'調度'一個'行動'或只是改變'路線'與'日期查詢'？ –

@JyothiBabuAraja如果我選擇日期，它應該添加到網址，並且該網址更改應該調度將採取url參數進行進一步處理的操作。我已經做了將它添加到URL部分。我需要第二部分的幫助。 – NitinD

你可以閱讀像'this.props.location.query.date'這樣的url查詢參數。 –

對不起傢伙，我錯過了一些東西的任何行動在我的代碼中，我通過以下方式解決了這個問題：

每當我改變輸入時，我都會調度一個動作並更新URL。
- 所以在上述例子中，我將在

openCalender選擇日期之後分派動作（）函數。

當用戶想要手動更改URL時，我會在服務器端處理它。
- 當用戶更改URL並按下回車鍵時，意味着服務器呈現整個新頁面。
- 我與頁面加載分派默認操作，

this.props.location.query

參數，可以通過這些反應，終極版路由器提供。

來源

2017-02-23 02:40:53 NitinD

當網址變更componentWillRecevieProps會自動轉到那裏，你可以訪問nextProps那麼你可以發送你想

在nextProps您可以訪問的位置有一切u需要約網址

來源

2017-02-22 11:49:55

更改URL和調用redux動作以獲取反應減少應用程序中的數據

回答

相關問題