Redux: प्रतिक्रिया-राउटर में मार्ग संक्रमण के जवाब में फायरिंग की कार्रवाई

को निर्मित 7 जुल॰ 2015 · 26टिप्पणियाँ · स्रोत: reduxjs/redux

हाय दोस्तों,

मैं अपने नवीनतम ऐप में प्रतिक्रिया-राउटर और रिडक्स का उपयोग कर रहा हूं और वर्तमान url परम्स और प्रश्नों के आधार पर आवश्यक राज्य परिवर्तन से संबंधित कुछ मुद्दों का सामना कर रहा हूं।

मूल रूप से मेरे पास एक घटक है जिसे अपडेट करने की आवश्यकता है वह हर बार यूआरएल बदलता है। राज्य को प्रॉपर के माध्यम से पारित किया जा रहा है ताकि सज्जाकार के साथ फिर से हो सके

 @connect(state => ({
   campaigngroups: state.jobresults.campaigngroups,
   error: state.jobresults.error,
   loading: state.jobresults.loading
 }))

फिलहाल मैं प्रतिक्रिया-राउटर से आने वाले url परिवर्तनों पर प्रतिक्रिया देने के लिए componentWillReceiveProps जीवनचक्र विधि का उपयोग कर रहा हूं क्योंकि जब राउटर this.props.params और this.props.query में बदल जाता है तो हैंडलर को नए प्रॉप्स पास करेगा

  componentWillReceiveProps(nextProps) {
    if (this.state.shouldupdate) {
      let { slug } = nextProps.params;
      let { citizenships, discipline, workright, location } = nextProps.query;
      const params = { slug, discipline, workright, location };
      let filters = this._getFilters(params);
      // set the state accroding to the filters in the url
      this._setState(params);
      // trigger the action to refill the stores
      this.actions.loadCampaignGroups(filters);
    }
  }

क्या रूट ट्रांज़िशन के आधार पर क्रियाओं को ट्रिगर करने के लिए एक मानक तरीका है या क्या मेरे पास स्टोर की स्थिति सीधे प्रॉम्प्ट से गुजरने के बजाय घटक की स्थिति से जुड़ी हो सकती है? मैंने willTransitionTo स्थैतिक विधि का उपयोग करने की कोशिश की है, लेकिन मुझे इस तक पहुँच नहीं है। इस प्रकार।

docs ecosystem question

स्रोत

deowk

👍8

सबसे उपयोगी टिप्पणी

@deowk इस समस्या के दो भाग हैं, मैं कहूँगा। पहला यह है कि componentWillReceiveProps() राज्य परिवर्तनों का जवाब देने के लिए एक आदर्श तरीका नहीं है - ज्यादातर क्योंकि यह आपको प्रतिक्रियात्मक रूप से सोचने के लिए मजबूर करता प्रतिक्रियात्मक रूप से जैसे हम Redux के साथ करते हैं। इसका समाधान आपकी वर्तमान राउटर जानकारी (स्थान, परिम, क्वेरी) _inside_ आपके स्टोर को संग्रहीत करना है। फिर आपका सारा राज्य एक ही स्थान पर है, और आप अपने शेष डेटा के समान Redux API का उपयोग करके इसकी सदस्यता ले सकते हैं।

ट्रिक एक एक्शन टाइप बनाने के लिए है जो जब भी राउटर की लोकेशन बदलती है तो आग लग जाती है। यह प्रतिक्रिया रूटर के आगामी 1.0 संस्करण में आसान है:

// routeLocationDidUpdate() is an action creator
// Only call it from here, nowhere else
BrowserHistory.listen(location => dispatch(routeLocationDidUpdate(location)));

अब आपका स्टोर स्टेट हमेशा राउटर स्टेट के साथ सिंक होगा। यह आपके घटक में उपर्युक्त क्वेरी परिवर्तन और मैन्युअल रूप से setState() प्रतिक्रिया देने की आवश्यकता को ठीक करता है - बस Redux के कनेक्टर का उपयोग करें।

<Connector select={state => ({ filter: getFilters(store.router.params) })} />

समस्या का दूसरा भाग आपको दृश्य परत के बाहर Redux स्थिति परिवर्तनों पर प्रतिक्रिया करने का एक तरीका है, एक मार्ग परिवर्तन के जवाब में एक कार्रवाई को फायर करने के लिए कहें। यदि आप चाहें, तो आप सरल मामलों के लिए कंपोनेंटवैलिसेपप्रॉप्स का उपयोग करना जारी रख सकते हैं।

कुछ अधिक जटिल के लिए, हालांकि, अगर आप इसके लिए खुले हैं तो मैं RxJS का उपयोग करने की सलाह देता हूं। यह वास्तव में वेधशालाएं हैं जिनके लिए डिज़ाइन किया गया है - प्रतिक्रियाशील डेटा प्रवाह।

Redux में ऐसा करने के लिए, पहले स्टोर स्टेट्स का एक देखने योग्य क्रम बनाएं। आप इसे redux-rx के observableFromStore() का उपयोग करके कर सकते हैं।

import { observableFromStore } from 'redux-rx';
const state$ = observableFromStore(store);

फिर यह विशिष्ट राज्य परिवर्तनों की सदस्यता के लिए अवलोकन ऑपरेटरों के उपयोग की बात है। सफल लॉगिन के बाद लॉगिन पृष्ठ से फिर से निर्देशन का एक उदाहरण है:

const didLogin$ = state$
  .distinctUntilChanged(state => !state.loggedIn && state.router.path === '/login')
  .filter(state => state.loggedIn && state.router.path === '/login');

didLogin$.subscribe({
   router.transitionTo('/success');
});

यह कार्यान्वयन बहुत सरल है कि समान कार्यक्षमता का उपयोग करना आवश्यक है जैसे componentDidReceiveProps() ।

उम्मीद है की वो मदद करदे!

acdlite 7 जुल॰ 2015

👍109 ❤40

सभी 26 टिप्पणियाँ

@deowk आप तुलना कर सकते हैं this.props के साथ nextProps अगर प्रासंगिक डेटा बदल देखने के लिए। यदि यह नहीं बदला, तो आपको फिर से कार्रवाई को ट्रिगर करने की आवश्यकता नहीं है और अनंत लूप से बच सकते हैं।

johanneslumpe 7 जुल॰ 2015

👍7

@johanneslumpe : मेरे मामले में प्रचार अभियान वस्तुओं का एक बड़ा संग्रह है, यह इस तरह की स्थिति के रूप में एक गहरी वस्तु तुलना की तरह अक्षमता का उपयोग करता है?

deowk 7 जुल॰ 2015

@deowk अगर आप अपरिवर्तनीय डेटा का उपयोग, तो आप सिर्फ संदर्भ तुलना कर सकते हैं

johanneslumpe 7 जुल॰ 2015

👍1

// routeLocationDidUpdate() is an action creator
// Only call it from here, nowhere else
BrowserHistory.listen(location => dispatch(routeLocationDidUpdate(location)));

<Connector select={state => ({ filter: getFilters(store.router.params) })} />

import { observableFromStore } from 'redux-rx';
const state$ = observableFromStore(store);

const didLogin$ = state$
  .distinctUntilChanged(state => !state.loggedIn && state.router.path === '/login')
  .filter(state => state.loggedIn && state.router.path === '/login');

didLogin$.subscribe({
   router.transitionTo('/success');
});

उम्मीद है की वो मदद करदे!

acdlite 7 जुल॰ 2015

👍109 ❤40

हमें नए डॉक्स में इसकी आवश्यकता है। इतना अच्छा लिखा है।

gaearon 7 जुल॰ 2015

👍14 ❤1

@acdlite : बहुत-बहुत धन्यवाद, आपकी सलाह ने मुझे वास्तव में बहुत मदद की, मैं हालांकि निम्नलिखित के साथ संघर्ष कर रहा हूं -> एक url परिवर्तन के जवाब में एक एक्शन क्रिएटर को ट्रिगर करके स्टोर में स्थिति को बदलना।

मैं वसीयतनामे में एक्शन क्रिएटर को ट्रिगर करना चाहता हूं। स्टैटिक मेथड के बाद से ऐसा लगता है कि रिएक्टर-राउटर में एकमात्र विकल्प v0.13.3 है

class Results extends Component  {
..........
}

Results.willTransitionTo = function (transition, params, query) {
 // how do I get a reference to dispatch here?
};

deowk 8 जुल॰ 2015

@deowk मेरा अनुमान है कि आप dispatch सीधे redux उदाहरण पर कॉल करते हैं:

const redux = createRedux(stores);
BrowserHistory.listen(location => redux.dispatch(routeLocationDidUpdate(location)));

baddox 8 जुल॰ 2015

@ वर्तमान में मैं इस तरह से प्रतिक्रिया रूटर 0.13.3 में अपने यूआरएल परिवर्तन भेजता हूँ:

Router.run(routes, Router.HistoryLocation, function(Handler, locationState) {
   dispatch(routeLocationDidUpdate(locationState))
   React.render(<Handler/>, appEl);
});

danielberndt 8 जुल॰ 2015

@acdlite वास्तव में अच्छी तरह से समझाया! : +1:
सहमत यह नए डॉक्स में भी होना चाहिए :)

emmenko 8 जुल॰ 2015

बस एक नोट, के रूप में BrowserHistory.history() करने के लिए बदल गया है BrowserHistory.addChangeListener() ।

https://github.com/rackt/react-router/blob/master/modules/BrowserHistory.js#L57

संपादित करें:

जो इस तरह दिख सकता है:

history.addChangeListener(() => store.dispatch(routeLocationDidUpdate(location)));

pburtchaell 10 जुल॰ 2015

👎4

और उस reducer के लिए प्रारंभिक स्थिति के बारे में क्या है, @pburtchaell?

abrkn 11 जुल॰ 2015

मेरे पास निम्न सेटअप है:

// client.js
class App extends Component {
  constructor(props) {
    super(props);
    this.history = new HashHistory();
  }

  render() {
    return (
      <Provider store={store}>
         {renderRoutes.bind(null, this.history)}
      </Provider>
    );
  }
}

// routes.js
export default function renderRoutes(history) {

  // When the route changes, dispatch that information to the store.
  history.addChangeListener(() => store.dispatch(routeLocationDidUpdate(location)));

  return (
    <Router history={history}>
      <Route component={myAppView}>
        <Route path="/" component={myHomeView}  />
      </Route>
    </Router>
  );
};

यह routeLocationDidUpdate() एक्शन क्रिएटर दोनों को हर बार रूट बदलता है और जब ऐप शुरू में लोड होता है।

pburtchaell 11 जुल॰ 2015

👍3

@pburtchaell क्या आप अपना routeLocationDidUpdate साझा कर सकते हैं?

gyzerok 11 जुल॰ 2015

@gyzerok ज़रूर। यह एक एक्शन क्रिएटर है।

// actions/location.js
export function routeLocationDidUpdate(location) {
  return {
    type: 'LOCATION_UPDATE',
    payload: {
      ...location,
    },
  };
}

pburtchaell 11 जुल॰ 2015

@pburtchaell तो आपके उदाहरण में मुझे यह समझ में नहीं आया कि आप किसी विशेष मार्ग के लिए डेटा

gyzerok 12 जुल॰ 2015

यहाँ मेरे उदाहरण का एक पूर्ण संस्करण है:

https://github.com/acdlite/redux-react-router/blob/master/README.md#bonus -reacting-to-state-changes-with-redux-rx

acdlite 12 जुल॰ 2015

मुझे लगता है कि @pburtchaell डेटा प्राप्त करने के लिए उस कोड के एक async संस्करण का उपयोग करेगा (REST कॉल आदि से)। क्या मैं अनिश्चित हूँ तो क्या है? मुझे लगता है कि यह एक स्टोर में जाता है, लेकिन क्या वह स्टोर एक लोकेशन हो जाएगा जो मैं तब करूंगा

<strong i="7">@connect</strong>

में, के लिए कहते हैं

<Comments />

जो पहले से ही एक टिप्पणी के लिए 'जुड़ा' (सदस्यता) होगा? या सिर्फ टिप्पणियों में इन स्थान क्रियाओं को पंजीकृत करें?

एक यूआरएल की तरह

/comments/123

हमेशा टिप्पणी घटक के लिए 'युग्मित' होने जा रहा है, तो मैं इसे कैसे पुन: उपयोग करूं? क्षमा करें यदि यह गूंगा है, तो यहां बहुत उलझन है। जिसका एक ठोस उदाहरण मुझे मिल सकता था।

swordsreversed 12 जुल॰ 2015

मैं इसके साथ भी जूझ रहा हूं, यह पता लगा रहा हूं कि मेरे स्थिर fetchData(dispatch, params) विधि को कैसे स्थिर किया जाए (क्योंकि सर्वर इसे शुरुआती रेंडर से पहले async FETCH क्रियाओं को भेजने के लिए कहता है)।

संदर्भ के भीतर dispatch का संदर्भ मौजूद होने के बाद से, मैं fetchData के क्लाइंट-साइड कॉलिंग के लिए इसे प्राप्त करने का सबसे अच्छा तरीका सोच रहा हूं, यह Connector -समान घटक है जो कॉल करता है fetchData या shouldFetchData , या select कॉलबैक को dispatch state के साथ एक संदर्भ मिलता है, इसलिए हम वर्तमान का निरीक्षण कर सकते हैं store की अवस्था और FETCH क्रियाओं को आवश्यकतानुसार भेजें।

उत्तरार्द्ध अधिक संक्षिप्त है लेकिन इस तथ्य को तोड़ता है कि select शुद्ध कार्य होना चाहिए। मैं पूर्व में देखूंगा।

grrowl 13 जुल॰ 2015

मेरा समाधान यह है, हालांकि मेरे सेट अप के अनुरूप है (स्थिर fetchData(dispatch, state) विधि जो async _FETCH क्रियाओं को भेजती है) यह उचित गुणों के साथ इसे पास किए गए किसी भी कॉलबैक को कॉल करेगा: https: // gist ।

grrowl 13 जुल॰ 2015

हमें निश्चित रूप से डॉक्स में जोड़ना होगा! "प्रतिक्रिया-राउटर के साथ उपयोग" अनुभाग में संभव।

gyzerok 13 जुल॰ 2015

हमारे पास 1.0 रिलीज के बाद ऐसा करने का एक आधिकारिक तरीका होगा।

gaearon 13 जुल॰ 2015

👍2

सुनकर बहुत अच्छा लगा @gaearon

swordsreversed 13 जुल॰ 2015

फिर यह विशिष्ट राज्य परिवर्तनों की सदस्यता के लिए अवलोकन ऑपरेटरों के उपयोग की बात है।

मुझे अपने स्टोर को किसी भी मार्ग परिवर्तन के साथ सिंक में रखने के लिए एक अवलोकन योग्य धारा मिल गई है, और मुझे अपना स्टोर देखने के लिए एक स्ट्रीम सेटअप भी मिला है। जब मेरी दुकान में कोई मूल्य परिवर्तित होता है, तो मैं एक नए मार्ग में परिवर्तन करने में रुचि रखता हूं, विशेष रूप से तब जब यह undefined से एक वैध स्ट्रिंग के रूप में बदलता है, जो सफलतापूर्वक मेरे ऐप में कहीं और फ़ॉर्म सबमिट करने के परिणामस्वरूप है।

दो धाराएँ स्थापित हैं और काम कर रही हैं, और स्टोर को अपडेट किया जा रहा है, लेकिन मैं Rx के लिए नया हूं, और अवलोकनीय क्वेरी ... किसी भी संकेत के साथ परेशानी हो रही है? क्या मैं सही रास्ते पर हूं? बहुत यकीन है कि इसके distinctUntilChanged साथ कुछ करना है, लेकिन इस समय मेरी नूडल पकाना, किसी भी मदद की सराहना की :)

संपादित करें: ऐक! क्षमा करें, मेरे अपने प्रश्न का उत्तर दिया। नीचे छद्म कोड। मुझे पता है अगर यह भयानक लग रहा है?

const didChangeProject$ = state$
  .distinctUntilChanged(state => state.project._id)
  .filter(state => typeof state.project._id !== 'undefined');

jedrichards 16 जुल॰ 2015

# 177 के पक्ष में समापन। जब हमें दस्तावेज़ राउटिंग के लिए मिलता है, तो हमें सभी परिदृश्यों को कवर करने की आवश्यकता होगी: राज्य परिवर्तन पर पुनर्निर्देशित, अनुरोध कॉलबैक पर पुनर्निर्देशित, आदि।

gaearon 14 अग॰ 2015

मुझे पता है कि यह बंद है .. लेकिन अभी रिएक्ट 0.14 और बीटा में विभिन्न 1.0 निर्भरता के साथ, क्या इस पर कोई अपडेट है और यदि नहीं, तो रिएक्ट 0.14, रिएक्शन-राउटर, रिडक्स आदि में नई क्षमताओं के आसपास एक ट्यूटोरियल हो सकता है। लिखा हुआ? हममें से बहुत से ऐसे प्रतीत होते हैं जो एक ही समय में यह सब सीखते / समझते हुए आगामी परिवर्तनों के साथ अद्यतित रहने की कोशिश कर रहे हैं। मुझे पता है कि चीजें प्रवाह की स्थिति में हैं (पंच .. उह .. इरादा नहीं), लेकिन ऐसा लगता है कि मैं अलग-अलग उदाहरणों के टुकड़ों को देख रहा हूं जो एक दूसरे के साथ अच्छा नहीं खेलते हैं और कई दिनों के बाद भी मुझे काम करने के लिए अपना अपडेटेड ऐप नहीं मिला है रूटिंग के साथ। सबसे अधिक संभावना है कि मेरी खुद की गलती है क्योंकि मैं अभी भी यह समझने में थोड़ा संघर्ष कर रहा हूं कि यह सब कैसे काम करता है, बस नवीनतम सामान के साथ एक अद्यतन ट्यूटोरियल की उम्मीद करना जल्द ही बाहर है।

justjacksonn 23 सित॰ 2015

जब तक कोई ट्यूटोरियल examples/real-world देखने के लिए स्वतंत्र महसूस करता है जिसमें रूटिंग है। यह अभी "नवीनतम और सबसे बड़ा" नहीं है, लेकिन यह ठीक काम करता है।

gaearon 23 सित॰ 2015

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Redux: प्रतिक्रिया-राउटर में मार्ग संक्रमण के जवाब में फायरिंग की कार्रवाई

सबसे उपयोगी टिप्पणी

सभी 26 टिप्पणियाँ

संबंधित मुद्दों