Redux: डॉक्स: रिएक्ट राउटर के साथ प्रयोग

मैंने मूल रूप से एक सार्वभौमिक संदर्भ में प्रतिक्रिया राउटर का उपयोग करने के लिए सर्वर साइड रेंडरिंग उदाहरण लिखा था। यह सुझाव दिया गया था कि प्रतिक्रिया राउटर के साथ उपयोग स्वयं का एक दस्तावेज़ बन सकता है। शायद हम दस्तावेज़ीकरण में एक अनुभाग जोड़ सकते हैं?

साथ ही, आप एक उदाहरण जोड़ने के बारे में कैसा महसूस करते हैं जो दिखाता है कि प्रतिक्रिया राउटर सार्वभौमिक रूप से उपयोग किया जा रहा है?

मुझे लगता है कि सार्वभौमिक होने के लिए real-world उदाहरण को संशोधित करना एक अच्छा विचार होगा। इस तरह आपको खरोंच से कुछ भी बनाने की ज़रूरत नहीं है।

यदि आप एक्शन क्रिएटर्स से ट्रांज़िशन करना चाहते हैं, तो राउटर इंस्टेंस को एक पैरामीटर के रूप में एक्शन क्रिएटर्स को पास करें

बस स्पष्ट करना चाहता था, यह केवल 0.13 में काम करता है क्योंकि 1.0beta में createRouter अवधारणा नहीं है (अभी तक?), सही?

आप इसे अपने रिएक्ट घटकों के भीतर से 1.0.0-बीटा3 के साथ कर सकते हैं।

class Thing extends Component {
  static contextTypes = {
    router: PropTypes.object
  }

  handleThing() {
    this.props.actionCreator(this.context.router);
  }
}

@timdorr क्या this.context का उपयोग करना सुरक्षित है? मैं इस धारणा के तहत था कि यह बाहरी रूप से उपयोग करने के लिए नहीं था।

हां, यह सिर्फ अनिर्दिष्ट है, असुरक्षित नहीं है। यह 0.14 में थोड़ा बदल रहा है, लेकिन इस तरह से नहीं कि यह टूट जाए। मुझे लगता है कि इसे जल्द ही किसी बिंदु पर प्रलेखित किया जाएगा।

@timdorr क्या इसका मतलब यह भी है कि 1.0.0-बीटा3 में किसी एक्शन क्रिएटर से भिन्न url में संक्रमण करना संभव है?

हां, यदि आप राउटर इंस्टेंस के साथ एक्शन क्रिएटर को पास करते हैं, तो आप इसके साथ जो चाहें कर सकते हैं, जिसमें ट्रांज़िशन भी शामिल है।

मैंने इसे एक साथ फेंक दिया:

const loginProps = {
  handleLogin: ({email, password}) => store.dispatch(userLogin({email, password})),
};



const routes = (
  <Route path="/" handler={App}>
    <Route path="login" handler={wrapper(Login, loginProps)} />
    <Route handler={authSection}>
      <Route path="" handler={Index} />
      <Route path="users" handler={wrapper(Users, (() => store.dispatch(getUsers())))} />
      <Route path="logout" handler={wrapper(Login, (() => store.dispatch(userLogout())))} />
    </Route>
  </Route>
);

const router = createRouter({
  location: HistoryLocation,
  routes,
});

store.dispatch(receiveRouter({router}));

Warning: Failed Context Types: Required context `store` was not specified in `SmartComponent(TodoApp)`. Check the render method of `Router`.

क्या गलत हो सकता है?

पुनश्च: आरआर 1.0.0-बीटा3

@gyzerok सुनिश्चित करें कि आप पूरे () => <Router>stuff</Router> को <Provider> में लपेटते हैं, जैसे real-world उदाहरण करता है।

@gaearon हाँ, ofc। मैं इसे प्रदाता में नहीं बल्कि अपने स्वयं के घटक में लपेटता हूं जो ज्यादातर आपके प्रदाता की कॉपी-पेस्ट है। फर्क यह है कि मैं इसके लिए स्टोर पास नहीं करता, बल्कि इसके अंदर स्टोर बनाता हूं।

@gyzerok यह कहना मुश्किल है कि कोड देखे बिना क्या गलत है। (और कृपया एक अलग मुद्दा दर्ज करें, react-redux रेपो एक अच्छी जगह है।)

real-wolrd उदाहरण के लिए Thx! लेकिन AsyncProps से कैसे निपटें? ऐसा लगता है कि डबल संदर्भ हेरफेर एक साथ काम नहीं करेगा।

import React from 'react';                                                                                                                                                                                         
import {createStore} from 'redux';                                                                                                                                                                                 
import {Provider} from 'react-redux';                                                                                                                                                                              
import {Router, Route} from 'react-router';                                                                                                                                                                        
import BrowserHistory from 'react-router/lib/BrowserHistory';                                                                                                                                                      
import AsyncProps from 'react-router/lib/experimental/AsyncProps';                                                                                                                                                 

import App from './containers/App';                                                                                                                                                                                
import reducers from './reducers';                                                                                                                                                                                 

const store = createStoreWithMiddleware(reducers);                                                                                                                                                                 
const history = new BrowserHistory();                                                                                                                                                                               

React.render(                                                                                                                                                                                                       
    <Provider store={store}>                                                                                                                                                                                        
        {() =>                                                                                                                                                                                                      
            <Router history={history} createElement={AsyncProps.createElement}>                                                                                                                                     
                <Route component={AsyncProps}>                                                                                                                                                                      
                    <Route path="/" component={App} />                                                                                                                                                              
                </Route>                                                                                                                                                                                            
            </Router>                                                                                                                                                                                               
        }                                                                                                                                                                                                           
    </Provider>,                                                                                                                                                                                                    
    document.body                                                                                                                                                                                                  
);

और App.js

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

let App = React.createClass({                                                                                                                                                                                      
    statics: {                                                                                                                                                                                                     
        loadProps(params, cb) {                                                                                                                                                                                    
            // have to call this with AsyncProps                                                                                                                                                                   
        }                                                                                                                                                                                                          
    },                                                                                                                                                                                                             
    displayName: 'App',                                                                                                                                                                                            

    render() {                                                                                                                                                                                                     
        return <div children="this is app" />                                                                                                                                                                      
    }                                                                                                                                                                                                              
});                                                                                                                                                                                                                

export default connect(state => state)(App); 

यह connect रैपर के बिना काम करेगा, लेकिन कोई redux भी नहीं होगा। क्या किसी को इस समस्या का सामना करना पड़ा है?

या डेटा लोड होने तक नेविगेशन को रोकने का कोई अन्य तरीका हो सकता है?

स्टैटिक्स सिर्फ स्टैटिक्स हैं। आप उन्हें connect() परिणाम सहित किसी भी चीज़ पर रख सकते हैं।

let App = React.createClass({                                                                                                                                                                                      
    displayName: 'App',                                                                                                                                                                                            

    render() {                                                                                                                                                                                                     
        return <div children="this is app" />                                                                                                                                                                      
    }                                                                                                                                                                                                              
});                                                                                                                                                                                                                

App = connect(state => state)(App); 

App.loadProps = function loadProps(params, cb) {                                                                                                                                                                                    
  // have to call this with AsyncProps                                                                                                                                                                   
}                                                                                                                                                                                                          

export default App; 

@gaearon क्षमा करें, उदाहरण पूर्ण नहीं है। मैंने लापता स्टैटिक प्रॉप्स के साथ connect परिणाम का विस्तार करने की कोशिश की, लेकिन संदर्भ के साथ वास्तविक समस्या। मुझे कुछ समय दें, मैं पूरे उदाहरण को अलग रेपो में डाल दूंगा

एक और चीज जिसकी मैं वर्तमान में जांच कर रहा हूं, एक स्पष्ट, विनीत तरीके से एक रेडक्स स्टोर में पैरा को संग्रहीत कर रहा है। कुछ तरीकों को आजमाने के बाद, मैंने लिखना समाप्त कर दिया:

<Route
  component={OrderDetails}
  path='/orders/:orderId'
  onEnter={({params}) => store.dispatch(setCurrentOrder(params.orderId))} 
/>

इसलिए चयनकर्ताओं से पैरा को संदर्भित करना संभव है, जैसे नीचे:

export const OrderDetails = state => {
  const {order} = state;
  return {
    order: order.details.get(order.currentOrderId),
    orderId: order.currentOrderId,
    isLoading: order.isLoadingDetails,
    error: order.detailsLoadingError
  };
};

एक बार फिर स्थिर react-redux-router जारी होने के बाद यह संभवतः बदल जाएगा।

अच्छी खबर: रिएक्ट राउटर 1.0 आरसी अब हमारे लिए आवश्यक हुक को उजागर करता है।
https://github.com/acdlite/redux-react-router देखें और हमें बताएं कि क्या आप इसे अभी पसंद करते हैं!

@gaearon मुझे react-router और प्रयोगात्मक AsyncProps के साथ समस्या मिली। प्रतिक्रिया को अद्यतन करने से समस्या हल हो जाती है

@wtfil जानकर अच्छा लगा!

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

क्या तब उम्मीद की जाती है कि एक्शन क्रिएटर्स जो ट्रांजिशन करते हैं, उन्हें शुद्ध कार्यों के बजाय अतुल्यकालिक होना चाहिए?

एक्शन क्रिएटर्स को साइड इफेक्ट होने की अनुमति है। जब संभव हो तो उनसे बचना सबसे अच्छा है, लेकिन निश्चित रूप से किसी बिंदु पर आपको उनकी आवश्यकता होती है, और चूंकि रेड्यूसर रेडक्स में शुद्ध होते हैं, और हमारे पास एल्म की तरह एक स्पष्ट प्रभाव तंत्र नहीं है (चर्चा के लिए # 569 देखें), एक्शन निर्माता हैं उन्हें लगाने की जगह।

रेडक्स-राउटर देखें। यह रिएक्ट राउटर के शीर्ष पर काम करता है, लेकिन आपको कार्यों को भेजने देता है और राउटर को सिंक करने का ख्याल रखता है।

रिएक्ट राउटर और रेडक्स राउटर की प्रतीक्षा में दोनों 1.0 हिट...

हां। ऐसा होने के बाद हम एक रेसिपी जोड़ेंगे।

इसलिए मैं इस चर्चा का अनुसरण कर रहा हूं और यह भी सोच रहा हूं कि रूटिंग सामान्य रूप से रेडक्स में कैसे फिट बैठता है (देखें https://github.com/rackt/redux/issues/805)। उस धागे में कुछ चर्चा और कुछ प्रयोग के आधार पर, मुझे एक ऐसा दृष्टिकोण मिला है जिसे मैं व्यक्तिगत रूप से प्रतिक्रिया-राउटर/रिएक्शन-रेडक्स-राउटर गोंद को पसंद करता हूं।

मूल रूप से, मैं प्रतिक्रिया-राउटर या एक-दूसरे के किसी भी ज्ञान को फिर से नहीं देने की कोशिश करता हूं और इसके बजाय उन्हें एक कस्टम इतिहास कार्यान्वयन के माध्यम से जोड़ता हूं। इस दृष्टिकोण के साथ, रूटिंग को इस तरह संभाला जाता है:

1. route के लिए स्टोर में एक क्रिया, एक रेड्यूसर और एक कुंजी बनाई जाती है।
2. एक मानक इतिहास कार्यान्वयन (यह उदाहरण पसंदीदा createHistory का उपयोग करता है लेकिन आप आसानी से createHashHistory या जो भी उपयोग कर सकते हैं) बनाया और सुना जाता है। जब ब्राउज़र में वर्तमान स्थान बदल दिया जाता है, तो एक रूट कार्रवाई भेजी जाती है, अंततः स्थान को स्टोर में डाल दिया जाता है।
3. एक मानक प्रतिक्रिया-राउटर उदाहरण एक दूसरे कस्टम इतिहास कार्यान्वयन के साथ बनाया जाता है जो ग्राहक (प्रतिक्रिया-राउटर) को सूचित करता है जब स्टोर की route कुंजी बदल जाती है। यह createHref और pushState को भी परिभाषित करता है, जो चरण 2 में बनाए गए मानक इतिहास दोनों को दर्शाता है।

बस, इतना ही। मुझे लगता है कि यह रेडक्स और प्रतिक्रिया-राउटर के बीच कर्तव्यों का काफी साफ अलगाव प्रदान करता है और एक और "गोंद" पुस्तकालय में खींचने की आवश्यकता को हटा देता है। मैं नीचे अपना कोड चिपका रहा हूं, मुझे कोई प्रतिक्रिया सुनने में बहुत दिलचस्पी होगी:

// please pay attention to library versions, this strategy is only tested with the indicated versions
import React from 'react'; // v0.13.3
import { Provider } from 'react-redux'; // v3.1.0
import { Router, Route, IndexRoute, Link } from 'react-router'; // v1.0.0-rc3
import { createHistory } from 'history'; // v1.12.3
import { createStore } from 'redux'; // v3.0.2

// define some components
class About extends React.Component {
    render () {
        return (
            <div><h1>About</h1></div>
        )
    }
}
class Home extends React.Component {
    render () {
        return (
            <div>
                <h1>Home</h1>
                <Link to="/about">Go to about</Link>
            </div>
        )
    }
}

// create a standard history object
var history = createHistory();

// set up 'route' action and action creator
const ROUTE = 'ROUTE';
function createRouteAction (location) {
    return {
        type: ROUTE,
        payload: location
    };
}

// set up reducer. here we only define behavior for the route action
function reducer (state = {}, action) {
    if (action.type === ROUTE) {
        return Object.assign({}, state, {
            route: action.payload
        });
    }
    else {
        return state;
        // whatever other logic you need
    }
}

// create store
const store = createStore(reducer);

// this factory returns a history implementation which reads the current state
// from the redux store and delegates push state to a different history.
function createStoreHistory () {
    return {
        listen: function (callback) {
            // subscribe to the redux store. when `route` changes, notify the listener
            const unsubscribe = store.subscribe(function () {
                const route = store.getState().route;
                callback(route);
            });

            return unsubscribe;
        },
        createHref: history.createHref,
        pushState: history.pushState
    }
}

React.render(
    <Provider store={store}>
        {() =>
            <Router history={createStoreHistory()}>
                <Route path="/about" component={About} />
                <Route path="/" component={Home} />
            </Router>
        }
    </Provider>,
    document.getElementById('root') // or whatever
);

// when the url changes, dispatch a route action. this is placed at the bottom so that the first route triggers the initial render
const unlisten = history.listen(function (location) {
    store.dispatch(createRouteAction(location));
});

मैं इसका उल्लेख करता हूं, क्योंकि मुझे लगता है कि यह उदाहरण मेरे जैसे कुछ लोगों की मदद कर सकता है जो रेडक्स के साथ रिएक्ट-राउटर के उपयोग से जूझ रहे थे और आपके इस दावे को स्पष्ट करने में मदद करते हैं कि आज रेडक्स और रिएक्ट-राउटर का एक साथ उपयोग किया जा सकता है।

@cappslock मुझे यह पसंद है, हालांकि एक छोटी सी बात है। आपके कार्यान्वयन में, मार्ग बदलना क्रिया है, इस प्रकार "कार्रवाई एक घटना है जो आदेश नहीं है" दृष्टिकोण को तोड़ता है जो अंततः कुछ खराब प्रथाओं को जन्म दे सकता है। आइए सोच को उल्टा करें, संभावित रूप से किसी भी क्रिया के परिणामस्वरूप साइड इफेक्ट हो सकता है जो एड्रेसबार को बदल देता है (या तो वह एक घटक या वास्तविक ब्राउज़र का एड्रेसबार ....) और साइड इफेक्ट के परिणामस्वरूप नई कार्रवाई ( ROUTE_CHANGED ) भेजी जाती है। यह मूल रूप से एपीआई कॉल को ट्रिगर करने जैसा ही पैटर्न है।

@ tomkis1 प्रतिक्रिया के लिए धन्यवाद। अगर मैं आपको सही ढंग से समझता हूं, तो यह वास्तव में पहले से ही इस तरह से काम करता है। ROUTE कार्रवाई यूआरएल बदलने के साइड इफेक्ट के रूप में भेजी जाती है। शायद ROUTE_CHANGED एक बेहतर नाम होगा?

ओह! मैंने अभी दो बार जाँच की है और आप सही थे। हाँ ROUTE_CHANGED बेहतर समझ में आएगा।

मुझे भी ऐसा ही लगता है। मैं वापस जाऊंगा और इसे बदल दूंगा लेकिन फिर ये टिप्पणियां वास्तव में भ्रमित होंगी :)

प्रवाह इस प्रकार है, स्पष्ट करने के लिए:

URL परिवर्तन -> ROUTE (या ROUTE_CHANGED ) क्रिया -> रेड्यूसर अपडेट स्टोर -> स्टोर इतिहास (पहले स्टोर करने के लिए सब्सक्राइब किया गया) श्रोताओं को सूचित करता है -> प्रतिक्रिया-राउटर अपडेट

मैं इसे पसंद करता हूं क्योंकि मुझे यूआई के उपयोगकर्ता द्वारा देखे गए राज्य को चलाने वाले स्टोर के अलावा कुछ भी नहीं चाहिए। यह परीक्षण के लिए भी बेहतर लगता है।

इस दृष्टिकोण की एक कमी यह है कि ROUTE_CHANGED कार्रवाई के जवाब में URL अपडेट नहीं होता है। मुझे यह भी यकीन नहीं है कि यह वांछनीय है अगर हम कह रहे हैं कि हम नहीं चाहते कि कार्यों को कमांड के रूप में माना जाए, लेकिन मुझे लगता है कि इसे या तो ROUTE_CHANGED एक्शन क्रिएटर के साइड इफेक्ट के रूप में या इसके द्वारा पूरा किया जा सकता है एक अलग स्टोर ग्राहक।

बीटीडब्ल्यू, यदि यह चर्चा इस मुद्दे के दायरे से बाहर है, तो कृपया मुझे बताएं और मैं इसे आगे बढ़ाऊंगा।

@cappslock मुझे वह बहुत पसंद है! मुझे निश्चित रूप से नहीं लगता कि यह एक समस्या है कि ROUTE_CHANGED भेजने से मार्ग नहीं बदलता है। कार्रवाई को एक घटना के रूप में मानना ​​और ट्रिगर नहीं मेरे लिए क्लीनर/अधिक समझ में आता है (क्योंकि यह उपयोगकर्ता इंटरैक्शन का जवाब दे रहा है; आप BUTTON_CLICKED कार्रवाई से वास्तव में एक बटन पर एक क्लिक ट्रिगर करने की उम्मीद नहीं करेंगे)। आपके कोड का एक हिस्सा है जो मुझे नहीं मिलता है। क्या आप मेरे लिए इस बिट के बारे में विस्तार से बता सकते हैं?

इसे सबसे नीचे रखा गया है ताकि पहला मार्ग प्रारंभिक रेंडर को ट्रिगर करे

@elliotdickison धन्यवाद! मैं इसे स्पष्ट करने का प्रयास करूंगा, लेकिन कृपया नमक के एक दाने के साथ मैं जो कहता हूं उसे लें क्योंकि यह गहन विश्लेषण के बजाय परीक्षण और त्रुटि और धारणाओं पर आधारित है। यह इस बिंदु पर अवधारणा/स्केच का प्रमाण है।

जब मैंने उस कोड को ReactRouter की तात्कालिकता से ऊपर रखा था, तो / मार्ग से संबंधित घटक प्रस्तुत नहीं किया गया था। राउटर अभी भी काम करेगा यदि क्रियाओं को मैन्युअल रूप से भेजा गया था या राज्य को मैन्युअल रूप से धक्का दिया गया था, इसलिए मुझे लगा कि यह इतिहास के साथ एक जीवनचक्र मुद्दा था। इसे ReactRouter की तात्कालिकता से नीचे ले जाने से यह हल हो गया। मुझे संदेह है कि इतिहास पुस्तकालय कम से कम एक ग्राहक होने तक प्रारंभिक मार्ग की अधिसूचना को स्थगित कर देता है। यदि उस सब्सक्राइबर को रिएक्ट राउटर के पहले सेट किया गया है, तो कोई भी सूचना उस तक नहीं पहुंचती है।

इसे समझाने का प्रयास करते हुए मुझे एहसास हुआ कि मेरी समझ में थोड़ी कमी है; मैं इसे और अधिक देखूंगा और बेहतर उत्तर देने का प्रयास करूंगा।

इस दृष्टिकोण की एक कमी यह है कि URL ROUTE_CHANGED कार्रवाई के जवाब में अपडेट नहीं होता है। मुझे यकीन नहीं है कि यह वांछनीय है अगर हम कह रहे हैं कि हम नहीं चाहते कि कार्यों को कमांड के रूप में माना जाए, लेकिन मुझे लगता है कि इसे या तो ROUTE_CHANGED एक्शन क्रिएटर के साइड इफेक्ट के रूप में या एक अलग स्टोर सब्सक्राइबर द्वारा पूरा किया जा सकता है।

मैं कहूंगा कि यह वांछित है, ROUTE_CHANGED को निश्चित रूप से बाहरी स्रोत द्वारा सक्रिय किया जाना चाहिए (उदाहरण के लिए ऑनहैशचेंज...) IMO URL परिवर्तन का परिणाम ROUTE_CHANGED होना चाहिए न कि इसके विपरीत।

मैं एक तरह से सहमत हूं। मैंने सोचा कि स्टोर की सदस्यता लेने और यूआरएल को सिंक में रखने के लिए अच्छा हो सकता है, अगर कोड से उत्पन्न ROUTE_CHANGED कार्रवाई वास्तविक इतिहास घटना से उत्पन्न हुई है, लेकिन आप तर्क दे सकते हैं कि वह मामला एक का प्रतिनिधित्व करता है प्रोग्रामिंग त्रुटि।

@capslock आपका दृष्टिकोण वास्तव में वास्तव में अच्छा है। क्या आप इसके बारे में कुछ ब्लॉगपोस्ट बना सकते हैं?

@vojtatranta बस देखें https://github.com/rackt/redux/issues/805 मुझे लगता है कि यह कार्यान्वयन के पीछे प्रेरणा थी।

@vojtatranta धन्यवाद! मेरे पास कोई ब्लॉग नहीं है, इसलिए मेरे पास जो भी जानकारी है वह इस थ्रेड और #805 में है। विशेष रूप से कुछ भी जिसके बारे में आप अधिक जानकारी चाहते थे?

1.0 खत्म हो गया है।

यह करने का समय है:

• इसका उपयोग करने के लिए पोर्ट रूटिंग उदाहरण
• real-world उदाहरण के आधार पर "रूटर के साथ उपयोग" नुस्खा जोड़ें

:ताली:

@gaearon क्या आप इस मुद्दे का संदर्भ दे सकते हैं जब राउटर_ उदाहरण के साथ _Usage पीआर में है? बहुत से लोग जिन्हें मैं जानता हूं (स्वयं शामिल हैं) स्पष्टीकरण की तलाश में हैं कि ये दोनों एक साथ कैसे अच्छा खेलते हैं।

हाँ यकीनन। यह तब होगा जब मुद्दा बंद हो जाएगा। :-)

शायद अब रेडक्स-सरल-राउटर पर विचार किया जाना चाहिए?

रेडक्स-सरल-राउटर +1

मैंने अभी सार्वभौमिक उदाहरण + प्रतिक्रिया-राउटर (+ redux-सरल-राउटर) को परिवर्तित किया है
https://github.com/eriknyk/redux-universal-app

हाय सब, इस चर्चा का निष्कर्ष क्या है? मैं देख रहा हूँ डॉक्स प्रतिक्रिया-राउटर के साथ उपयोग के लिए अद्यतन नहीं हैं
cc @gaearon

@gaearon के बाद मैंने अपने प्रतिक्रिया आवेदन को redux पर बाध्य किया, मैं अपने घटकों के प्रदर्शन/छुपा को नियंत्रित करने के लिए बस राज्य का उपयोग करता हूं। इसलिए मुझे नहीं लगता कि आरआर जैसी मूल "राउटर" भूमिका अब मेरे आवेदन में फिट बैठती है।
केवल एक चीज जो मुझे लगता है कि "नए राउटर" को करने की ज़रूरत है वह है यूआरएल को राज्य में मैप करना (क्रियाओं के माध्यम से?)
अगर हम यूआरएल को यह तय करने देते हैं कि एप्लिकेशन घटक (शायद उनमें से कुछ) कैसे प्रदर्शित होते हैं, इसका मतलब है कि हमारे पास राज्य के दो स्रोत हैं, एक यूआरएल है, दूसरा रेडक्स का स्टोर है, जो चीजों को कठिन बना देगा ...
आप इस बारे में क्या कहते हैं? क्या हमें पता बार को हमारे आवेदन के अन्य घटक के रूप में रहने देना चाहिए।

धन्यवाद

हम आधिकारिक तौर पर https://github.com/rackt/react-router-redux/pull/259 शिप करने के बाद इस दस्तावेज़ को लिखने के लिए प्रतिबद्ध हैं। यह रिएक्ट राउटर और रेडक्स को बाइंड करने का सबसे अच्छा तरीका होगा। दस्तावेज़ में, हम पहले दिखाएंगे कि उस पैकेज के बिना उनका उपयोग कैसे करें, और धीरे-धीरे दो उपयुक्तताएं पेश करें जो पैकेज प्रदान करता है: मिडलवेयर और स्टोर में सत्य के रूटिंग स्रोत को स्थानांतरित करना। दोनों वैकल्पिक हैं इसलिए हम यह बताना सुनिश्चित करेंगे कि आप किस मामले में उनका उपयोग करना चाहते हैं, और वे आपको वैनिला आरआर पर क्या देते हैं।

यहां विचार करने के लिए एक विचार है: यदि आप रूटिंग और इतिहास से संबंधित मिडलवेयर के बारे में कुछ भी समझाते हैं, तो वह http://rackt.org/redux/docs/advanced/Middleware.html की सामान्य व्याख्या के भीतर यथार्थवादी अनुप्रयोग का एक विशिष्ट हिस्सा बन सकता है ( उदाहरण के लिए, अंत में उदाहरणों में)

@gaearon रिएक्ट राउटर डॉक्टर/अगले चरणों पर कोई प्रगति? मैं Redux प्रलेखन के माध्यम से पढ़ रहा हूं और इसे प्यार कर रहा हूं, लेकिन उन नकली लिंक से बाहर हो गया :(

मैंने केवल अपने व्यक्तिगत रेपो में प्रतिक्रिया राउटर दस्तावेज़ों को फिर से लिखना शुरू कर दिया है और मैं वहां भी रेडक्स अनुभाग रखने की योजना बना रहा हूं। मैं जल्द ही कुछ कर सकता हूं, यह मेरे खाली समय पर निर्भर करता है। मैं आपको अपडेट करूंगा। https://github.com/knowbody/react-router-docs

निष्पक्ष होने के लिए आपको रिएक्ट राउटर को काम करने के लिए Redux की तरफ से किसी चीज की जरूरत नहीं है। लेकिन हाँ हमें ऐसा करने की ज़रूरत है।

सावधान रहें: रिएक्ट राउटर 3.0 रिएक्ट रेडक्स connect() अनुकूलन के साथ बेहतर काम करेगा, और नए withRouter() एचओसी का मतलब है कि आपको सीधे संदर्भ का उपयोग करने की आवश्यकता नहीं है।

https://twitter.com/dan_abramov/status/729768048417251328

@gaearon , @timdorr क्या आप राउटर इंस्टेंस को एक्शन क्रिएटर्स के तर्क के रूप में पास करने और एक्शन क्रिएटर्स में सीधे ब्राउज़रहिस्ट्री आयात करने के बीच ट्रेड-ऑफ को स्पष्ट कर सकते हैं (जैसा कि यहां सुझाव दिया गया है https://github.com/reactjs/react-router/blob /मास्टर/डॉक्स/गाइड्स/नेविगेटिंगऑउटसाइडऑफकंपोनेंट्स.एमडी?

router बस आपके इतिहास के उदाहरण को कुछ अतिरिक्त उपहारों के साथ लपेटता है, लेकिन यह दो उदाहरणों के बीच समान push और replace तरीके हैं।

धन्यवाद, @timdorr।

मुझे लगता है कि सवाल तब बन जाता है कि हमें withRouter() संरचना की आवश्यकता क्यों है यदि router मूल रूप से इतिहास सिंगलटन को लपेटता है (यह एक सिंगलटन है, है ना)?

क्या यह किसी घटक और इतिहास उदाहरण के बीच ढीले युग्मन की अनुमति देना है (यानी घटक को सीधे सिंगलटन ऑब्जेक्ट तक पहुंचने से रोकने के लिए)? यदि हां, तो क्या एक्शन क्रिएटर से हिस्ट्री इंस्टेंस को एक्सेस करते समय वही लॉजिक लागू नहीं होगा?

हां, और यदि आप अपना खुद का इतिहास उदाहरण प्रदान करते हैं और अपना सिंगलटन मॉड्यूल नहीं बनाना चाहते (या नहीं कर सकते हैं) (जो भ्रमित हो सकता है यदि आप जेएस मॉड्यूल सिस्टम से सुपर-परिचित नहीं हैं)। यदि आप इसे स्वयं करना चाहते हैं, तो हमारे पैटर्न का अनुसरण करने के लिए आपका स्वागत है।

मुझे यकीन नहीं है कि withRouter का दस्तावेजीकरण करना उचित होगा कि इसका उपयोग कई उच्च ऑर्डर घटकों के लिए कैसे किया जा सकता है। मैं अभी भी इससे बचने का सबसे अच्छा तरीका जानने की कोशिश कर रहा हूं:
connect(mapStateToProps, mapDispatchToProps)(withRouter(withAnalytics(withLanguage(TestForm)))); ।

मैं compose जैसी किसी चीज़ का भी उपयोग कर सकता था?

const enhance = compose(
  connect(mapStateToProps, mapDispatchToProps),
  withRouter,
  withAnalytics,
  withLanguage
);

export default enhance(TestForm);

हालाँकि, मेरे उपयोग के मामले में संदर्भ उपयोगकर्ता, वर्तमान भाषा, विषय की जानकारी और विश्लेषिकी में लॉग इन होने वाला है, जो इसे बहुत सारे संदर्भ और बहुत सारे जुड़े घटकों के साथ चुनौतीपूर्ण बनाता है।

एक अन्य विचार withRouter और connect तर्क को एक संदर्भ नामस्थान के तहत डुप्लिकेट करना है: withAppContext() => props.app = { user, lang, theme, analytics, router, connect? } ?

क्या यह दस्तावेज़ीकरण या उदाहरण withRouter के साथ connect $ के उपयोग के लिए फायदेमंद होगा?

@gaearon क्या अब इसके लिए कोई अपडेट है कि रिएक्ट राउटर 3.0.0 और आपके नए एगहेड वीडियो कुछ समय के लिए बाहर हो गए हैं, और यह धागा एक साल के लिए खोला गया है?

#1929 . में किया गया