javascript - Redux के साथ प्रतिक्रिया राउटर परिवर्तन के जवाब में नया डेटा कैसे प्राप्त करें?




reactjs react-router (4)

मैं रेडक्स, रेडक्स-राउटर और रिस्पॉज का उपयोग कर रहा हूं।

मैं एक ऐप बनाने की कोशिश कर रहा हूं जहां मैं मार्ग परिवर्तन पर जानकारी प्राप्त करता हूं, इसलिए, मेरे पास कुछ ऐसा है:

<Route path="/" component={App}>
    <Route path="artist" component={ArtistApp} />
    <Route path="artist/:artistId" component={ArtistApp} />
</Route>

जब कोई artist/<artistId> प्रवेश करता है तो मैं कलाकार की खोज करना चाहता हूं और फिर जानकारी प्रस्तुत करना चाहता हूं। सवाल यह है कि यह करने का सबसे अच्छा तरीका क्या है?

मुझे आरएक्सजेएस का उपयोग करके या अनुरोधों को प्रबंधित करने के लिए मिडलवेयर की कोशिश करने के बारे में कुछ जवाब मिल गए हैं। अब, मेरा सवाल यह है कि क्या यह वास्तव में आवश्यक है या आर्किटेक्चर प्रतिक्रिया-अज्ञेयवादी रखने का एक तरीका है? क्या मैं सिर्फ प्रतिक्रिया घटकडिडमाउंट () और घटकडिडअपडेट () के बजाय मुझे आवश्यक जानकारी प्राप्त कर सकता हूं? अभी मैं उन कार्यों में एक क्रिया को ट्रिगर करके ऐसा कर रहा हूं जो सूचना का अनुरोध करते हैं और जब जानकारी आती है तो घटक पुन: प्रस्तुत करता है। घटक को मुझे यह बताने के लिए कुछ गुण हैं कि:

{
    isFetching: true,
    entity : {}
}

धन्यवाद!


Answers

अब, मेरा सवाल यह है कि क्या यह वास्तव में आवश्यक है या आर्किटेक्चर प्रतिक्रिया-अज्ञेयवादी रखने का एक तरीका है? क्या मैं सिर्फ प्रतिक्रिया घटकडिडमाउंट () और घटकडिडअपडेट () के बजाय मुझे आवश्यक जानकारी प्राप्त कर सकता हूं?

आप componentWillReceiveProps(nextProps) componentDidMount() और componentWillReceiveProps(nextProps) में पूरी तरह से ऐसा कर सकते हैं।
रेडक्स में real-world उदाहरण में हम यही करते हैं:

function loadData(props) {
  const { fullName } = props;
  props.loadRepo(fullName, ['description']);
  props.loadStargazers(fullName);
}

class RepoPage extends Component {
  constructor(props) {
    super(props);
    this.renderUser = this.renderUser.bind(this);
    this.handleLoadMoreClick = this.handleLoadMoreClick.bind(this);
  }

  componentWillMount() {
    loadData(this.props);
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.fullName !== this.props.fullName) {
      loadData(nextProps);
    }

  /* ... */

}

आप आरएक्स के साथ अधिक परिष्कृत हो सकते हैं, लेकिन यह बिल्कुल जरूरी नहीं है।


1) मार्ग परिवर्तनों पर आशावादी अनुरोध कार्रवाइयों को प्रेषित करना, यानी BrowserHistory.listen(location => dispatch(routeLocationDidUpdate(location)));

2) Async क्रियाएँ: http://redux.js.org/docs/advanced/AsyncActions.html


मैंने इसे सादे राउटर पर कस्टम बाइंडिंग के साथ किया है, इस पर कॉल /

const store = configureStore()

//then in router
<Route path='/myRoutePath' component={MyRouteHandler} onEnter={()=>store.dispatch(myRouteEnterAction())} />

यह थोड़ा हैकी है लेकिन काम करता है, और मुझे अभी बेहतर समाधान नहीं पता है।


घटनाएं पूरी तरह से अलग उद्देश्यों के लिए हैं। टाइप किए गए वर्णों की पहचान के लिए भौतिक कुंजियों और keyup पहचान करने के लिए keyup और keyup उपयोग करें। दो अलग-अलग घटनाओं के साथ मौलिक रूप से अलग-अलग कार्य हैं; दोनों को मिलाने की कोशिश मत करो। विशेष रूप से, keyCode घटनाओं पर keyCode आमतौर पर अनावश्यक होता है और इसका उपयोग नहीं किया जाना चाहिए (पुराने IE को छोड़कर, लेकिन उस पर अधिक के लिए नीचे दिए गए लिंक किए गए दस्तावेज़ देखें); प्रिंट करने योग्य charCode लिए यह आमतौर पर which और charCode के समान charCode , हालांकि ब्राउज़रों के बीच कुछ भिन्नता है।

प्रमुख घटनाओं पर जन वोल्‍टर का लेख , जो पहले से ही एक और उत्‍तर में जुड़ा हुआ है, मेरे लिए इस विषय पर निश्चित शब्‍द है और इसमें यह वर्णन किया गया है कि हर प्रकार के प्रमुख ईवेंट और हर ब्राउज़र के लिए अलग-अलग गुण क्‍या हैं।







javascript reactjs react-router redux