Redux: المستندات: الاستخدام مع جهاز التوجيه React

كنت قد كتبت في الأصل مثال تقديم جانب الخادم لاستخدام جهاز التوجيه التفاعلي في سياق عالمي. تم اقتراح أن الاستخدام مع جهاز توجيه التفاعل يمكن أن يصبح مستندًا خاصًا به. ربما يمكننا إضافة قسم إلى الوثائق؟

أيضًا ، ما هو شعورك حيال إضافة مثال يوضح استخدام جهاز التوجيه المتفاعل عالميًا؟

أعتقد أن تعديل المثال real-world ليكون عالميًا سيكون فكرة جيدة. بهذه الطريقة لن تضطر إلى بناء أي شيء من الصفر.

إذا كنت تريد الانتقال من منشئ الإجراء ، فمرر مثيل جهاز التوجيه كمعامل إلى منشئ الإجراء

أردت فقط التوضيح ، هذا يعمل فقط في 0.13 لأن 1.0 بيتا ليس لديها مفهوم createRouter (حتى الآن؟) ، صحيح؟

يمكنك فعل ذلك باستخدام 1.0.0-beta3 من داخل مكونات React الخاصة بك.

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

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

timdorr هل استخدام this.context آمن؟ كان لدي انطباع بأنه لم يكن من المفترض استخدامه خارجيًا.

نعم ، إنها فقط غير موثقة وليست غير آمنة. لقد تغير قليلاً في 0.14 ، ولكن ليس بطريقة من شأنها كسر هذا. أتخيل أنه سيتم توثيقه في وقت ما قريبًا.

timdorr هل هذا يعني أيضًا أنه من الممكن الانتقال إلى عنوان url مختلف من منشئ الإجراء في 1.0.0-beta3؟

نعم ، إذا قمت بتمرير مثيل جهاز التوجيه إلى منشئ الإجراء ، فيمكنك فعل ما تريد به ، بما في ذلك الانتقالات.

جمعت هذا معًا:

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`.

ما هو الخطأ؟

ملاحظة: RR 1.0.0-beta3

gyzerok تأكد من التفاف () => <Router>stuff</Router> بالكامل في <Provider> ، تمامًا كما يفعل المثال real-world .

gaearon نعم ، أوقيانوسيا. أقوم بلفها ليس في الموفر ولكن في المكون الخاص بي والذي يكون في الغالب نسخ ولصق لمزودك. الفرق هو أنني لا أمرر المتجر إليه ، ولكن أنشئ مخزنًا بداخله.

gyzerok من الصعب قول ما هو الخطأ دون رؤية الكود. (ويرجى تقديم مشكلة منفصلة ، react-redux الريبو مكان جيد.)

Thx مقابل real-wolrd example! ولكن كيف تتعامل مع 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 مع فقدان الدعائم الثابتة ، لكن هناك مشكلة حقيقية في السياق. أعطني بعض الوقت ، سأدفع المثال بأكمله في الريبو المنفصل

شيء آخر أقوم به حاليًا هو تخزين المعلمات في متجر redux بطريقة واضحة وغير مفهومة. بعد تجربة بعض الطرق ، انتهى بي الأمر بكتابة:

<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 مرة أخرى.

بشرى سارة: React Router 1.0 RC يعرض الآن الخطافات التي نحتاجها.
تحقق من https://github.com/acdlite/redux-react-router وأخبرنا ما إذا كنت ترغب في ذلك الآن!

gaearon لقد وجدت المشكلة مع react-router والتجريبية AsyncProps . تحديث رد الفعل يحل المشكلة

wtfil من الجيد أن تعرف!

عند الدمج مع جهاز التوجيه التفاعلي ، أفهم من هذا الموضوع أنه يمكننا تمرير مثيل جهاز التوجيه إلى منشئ الإجراء وطرق الاتصال عليه. ومع ذلك ، فإنني أفهم أيضًا أن صانعي الإجراءات يقصدون عدم إحداث آثار جانبية في أنقى صورها. الحالة الوحيدة التي أرى فيها حيث يُسمح لمنشئي الإجراءات بالتأثيرات الجانبية هي عندما تكون الإجراءات غير المتزامنة التي يتم التعامل معها بواسطة البرامج الوسيطة. فهل من المتوقع إذن أن يكون منشئو الإجراء الذين يؤدون انتقالات غير متزامن ، وليس وظائف خالصة؟

فهل من المتوقع إذن أن يكون منشئو الإجراء الذين يؤدون انتقالات غير متزامن ، وليس وظائف خالصة؟

يُسمح لمنشئي العمل أن يكون لديهم آثار جانبية. من الأفضل تجنبها عندما يكون ذلك ممكنًا ولكن بالطبع في مرحلة ما تحتاج إليها ، وبما أن المخفضات نقية في Redux ، وليس لدينا آلية تأثير واضحة كما هو الحال في Elm (انظر # 569 للمناقشة) ، فإن منشئي الإجراءات هم مكان لوضعها.

تحقق من جهاز التوجيه redux . إنه يعمل أعلى React Router ، لكنه يتيح لك إرسال الإجراءات ويتولى مزامنة جهاز التوجيه.

في انتظار React Router و Redux Router وصل كلاهما إلى 1.0 ...

نعم. سنضيف وصفة بعد حدوث ذلك.

لذلك كنت أتابع هذه المناقشة وأفكر أيضًا قليلاً في كيفية تناسب التوجيه مع إعادة الإرسال بشكل عام (انظر https://github.com/rackt/redux/issues/805). بناءً على بعض المناقشات في هذا الموضوع وبعض التجارب ، وجدت نهجًا أفضله شخصيًا لغراء جهاز التوجيه / رد الفعل / إعادة الإرسال.

في الأساس ، أحاول عدم إعطاء جهاز التوجيه التفاعلي أو إعادة أي معرفة ببعضها البعض وبدلاً من ذلك أوصلهم عبر تنفيذ محفوظات مخصص. باستخدام هذا الأسلوب ، يتم التعامل مع التوجيه على النحو التالي:

1. يتم إنشاء إجراء ومخفض ومفتاح في المتجر مقابل route .
2. يتم إنشاء تطبيق السجل القياسي (يستخدم هذا المثال createHistory المفضل ولكن يمكنك بسهولة استخدام createHashHistory أو أيًا كان) والاستماع إليه. عندما يتم تغيير الموقع الحالي في المستعرض ، يتم إرسال إجراء ROUTE ، مما يؤدي في النهاية إلى وضع الموقع في المتجر.
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 ). إنه في الأساس نفس النمط مثل تشغيل استدعاء API.

@ tomkis1 شكرا على ردود الفعل. إذا كنت أفهمك بشكل صحيح ، فهذا في الواقع يعمل بهذه الطريقة. تم إرسال الإجراء ROUTE كتأثير جانبي لتغيير عنوان URL. ربما يكون ROUTE_CHANGED اسمًا أفضل؟

أوه! لقد تحققت للتو مرتين وكنت على حق. نعم ، ROUTE_CHANGED سيكون له معنى أفضل.

أظن ذلك أيضا. سأعود وأغيره ولكن بعد ذلك ستكون هذه التعليقات مربكة حقًا :)

التدفق مثل هذا للتوضيح:

تغيير عنوان URL -> إجراء ROUTE (أو ROUTE_CHANGED ) -> متجر تحديثات المخفض -> تاريخ المتجر (الذي تم الاشتراك فيه مسبقًا في المتجر) لإعلام المستمعين -> تحديثات جهاز التوجيه المتفاعل

أفضل هذا لأنني لا أريد أي شيء سوى المتجر الذي يقود حالة واجهة المستخدم التي يلاحظها المستخدم. يبدو أيضًا أنه مفضل للاختبار.

يتمثل أحد أوجه القصور في هذا الأسلوب في عدم تحديث عنوان URL استجابةً للإجراء ROUTE_CHANGED . لست متأكدًا مما إذا كان هذا مرغوبًا فيه إذا قلنا أننا لا نريد التعامل مع الإجراءات كأوامر ، لكنني أتخيل أنه يمكن إكمالها إما كأثر جانبي لمنشئ الإجراء ROUTE_CHANGED أو بواسطة مشترك في متجر منفصل.

راجع للشغل ، إذا كانت هذه المناقشة خارج نطاق هذه المشكلة ، فيرجى إبلاغي بذلك وسأنتقل إليها.

cappslock أحب ذلك كثيرا! بالتأكيد لا أعتقد أنها مشكلة أن إرسال ROUTE_CHANGED لا يغير المسار. تبدو معاملة الإجراء كحدث وليس محفزًا أكثر وضوحًا / أكثر قابلية للفهم بالنسبة لي (نظرًا لأنه يستجيب لتفاعل المستخدم ؛ لا تتوقع أن يؤدي إجراء BUTTON_CLICKED إلى إحداث نقرة على زر بالفعل). هناك جزء واحد من التعليمات البرمجية الخاصة بك لم أحصل عليه بالرغم من ذلك. هل يمكنك توضيح هذا الشيء بالنسبة لي؟

يتم وضع هذا في الجزء السفلي بحيث يؤدي المسار الأول إلى تشغيل التصيير الأولي

elliotdickison شكرا لك! سأحاول توضيح ذلك ، لكن من فضلك خذ ما أقوله بحذر لأنه يعتمد على التجربة والخطأ والافتراضات بدلاً من التحليل العميق. هذا أكثر من دليل على المفهوم / رسم تخطيطي في هذه المرحلة.

عندما وضعت هذا الرمز فوق إنشاء مثيل ReactRouter ، لم يتم عرض المكون المقابل للمسار / . سيظل جهاز التوجيه يعمل إذا تم إرسال الإجراءات يدويًا أو تم دفع الحالة يدويًا ، لذلك اعتقدت أنها مشكلة دورة حياة مع السجل. نقله أسفل إنشاء مثيل ReactRouter حل هذا. أظن أن مكتبة التاريخ ترجئ إشعار المسار الأولي حتى يكون هناك مشترك واحد على الأقل. إذا تم إعداد هذا المشترك قبل ReactRouter ، فلن تصله أي من الإشعارات.

في محاولة لشرح هذا ، أدركت أن فهمي يفتقر إلى حد ما ؛ سأبحث في هذا أكثر وسأحاول تقديم إجابة أفضل.

أحد أوجه القصور في هذا الأسلوب هو أن عنوان URL لا يتم تحديثه استجابةً للإجراء ROUTE_CHANGED. لست متأكدًا حتى مما إذا كان هذا مرغوبًا فيه إذا قلنا أننا لا نريد التعامل مع الإجراءات كأوامر ، لكنني أتخيل أنه يمكن إكمالها إما كأثر جانبي لمنشئ إجراء ROUTE_CHANGED أو بواسطة مشترك متجر منفصل.

أود أن أقول إن هذا مرغوب فيه ، يجب بالتأكيد تشغيل ROUTE_CHANGED بواسطة مصدر خارجي (مثل onhashchange ...) يجب أن يؤدي تغيير عنوان URL الخاص بـ IMO إلى ROUTE_CHANGED وليس العكس.

أنا نوع من الاتفاق. اعتقدت أنه قد يكون من الجيد أن يكون لديك شيء ما للاشتراك في المتجر والحفاظ على مزامنة عنوان URL في حالة إرسال إجراء ROUTE_CHANGED تم إرساله من كود وليس من حدث سجل فعلي ، ولكن يمكنك القول أن هذه الحالة تمثل خطأ في البرمجة.

cappslock نهجك جيد حقًا. هل يمكنك عمل بعض التدوينات حول هذا الموضوع؟

vojtatranta فقط تحقق من https://github.com/rackt/redux/issues/805 أعتقد أنه كان مصدر الإلهام وراء التنفيذ.

vojtatranta شكرا! ليس لدي مدونة ، لذا فإن كل المعلومات التي أمتلكها موجودة في هذا الموضوع ورقم 805. أي شيء على وجه الخصوص تريد المزيد من المعلومات عنه؟

1.0 خارج.

انه الوقت ل:

• مثال على توجيه المنفذ لاستخدامه
• أضف وصفة "Usage with Router" بناءً على مثال real-world

: تصفيق:

gaearon هل يمكنك الإشارة إلى هذه المشكلة عندما يكون مثال _Usage with Router_ في العلاقات العامة؟ يبحث العديد من الأشخاص الذين أعرفهم (بمن فيهم أنا) عن توضيح حول كيفية لعب هذين الشخصين معًا بشكل جيد.

نعم بالتأكيد. هذا هو الوقت الذي سيتم فيه إغلاق المشكلة. :-)

ربما ينبغي النظر في إعادة التوجيه البسيط الآن؟

redux-simple-router +1

لقد قمت للتو بتحويل المثال العالمي + جهاز التوجيه التفاعلي (+ جهاز التوجيه البسيط redux)
https://github.com/eriknyk/redux-universal-app

مرحباً بالجميع ، ما هي خاتمة هذه المناقشة؟ أرى أن المستندات لم يتم تحديثها للاستخدام مع جهاز التوجيه التفاعلي
سي سي جايرون

gaearon بعد أن ربطت تطبيق رد الفعل الخاص بي بالإعادة ، أنا فقط استخدم الحالة للتحكم في عرض / إخفاء مكوناتي. لذلك لا أعتقد أن دور "الموجه" الأصلي مثل RR يناسب طلبي الآن.
الشيء الوحيد الذي أعتقد أن "جهاز التوجيه الجديد" بحاجة إلى القيام به هو تعيين عنوان url إلى الحالة (عبر الإجراءات؟) وإعادة تعيين الحالة إلى عنوان url أيضًا.
إذا سمحنا لعناوين url بتحديد كيفية عرض مكون التطبيق (ربما بعضها) ، فهذا يعني أن لدينا مصدرين للحالة ، أحدهما عنوان url والآخر متجر redux ، مما سيجعل الأمور أكثر صعوبة ...
ماذا تقول عن هذا؟ هل يجب أن نسمح فقط لشريط العنوان أن يكون عنصرًا آخر من مكونات تطبيقنا.

شكرا

ألتزم رسميًا بكتابة هذا المستند بعد أن نشحن https://github.com/rackt/react-router-redux/pull/259. ستكون هذه هي الطريقة المباركة لربط React Router و Redux. في المستند ، سنعرض أولاً كيفية استخدامها بدون هذه الحزمة ، ونقدم تدريجيًا اثنين من وسائل الراحة التي توفرها الحزمة: الوسيطة ونقل مصدر الحقيقة للتوجيه إلى المتجر. كلاهما اختياري ، لذا سنحرص على توضيح أنك تريد الاشتراك في استخدامهما ، وماذا يقدمان لك على Vanilla RR.

إليك فكرة يجب وضعها في الاعتبار: إذا كان أي شيء تشرحه حول البرامج الوسيطة المتعلقة بالتوجيه والتاريخ يمكن أيضًا أن يصبح جزءًا محددًا من التطبيق الواقعي ضمن الشرح العام لـ http://rackt.org/redux/docs/advanced/Middleware.html ( على سبيل المثال ، في الأمثلة الموجودة في النهاية)

gaearon أي تقدم في ملف React Router / الخطوات التالية؟ أقرأ من خلال وثائق Redux وأحبها ، لكنني أزعجني تلك الروابط المزيفة :(

لقد بدأت للتو في إعادة كتابة مستندات جهاز التوجيه في الريبو الشخصي الخاص بي وأنا أخطط للحصول على قسم إعادة الإرسال هناك أيضًا. قد أقوم بشيء ما قريبًا ، يعتمد على وقت فراغي. انا سوف أعلمك بكل جديد. https://github.com/knowbody/react-router-docs

لكي نكون منصفين ، لا تحتاج إلى أي شيء على جانب Redux لتشغيل جهاز التوجيه. لكن نعم نحن بحاجة للقيام بذلك.

تنبيه: سيعمل React Router 3.0 بشكل أفضل مع تحسينات React Redux connect() ، ويعني withRouter() HOC الجديد أنك لست بحاجة إلى استخدام السياق مباشرة.

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

gaearon ، timdorr ، هل يمكنك توضيح المفاضلات بين تمرير مثيل جهاز التوجيه كوسيلة لمنشئي الإجراءات والاستيراد المباشر للمتصفح التاريخ في منشئ الإجراء (كما هو مقترح هنا https://github.com/reactjs/react-router/blob /master/docs/guides/NavigatingOutsideOfComponents.md؟

يقوم router فقط بتغليف مثيل السجل الخاص بك ببعض الأشياء الجيدة الإضافية عليه ، ولكنه نفس الأساليب push و replace بين المثالين.

شكرا لك @ تيمدور.

أعتقد أن السؤال يصبح إذن لماذا نحتاج إلى تركيبة withRouter() إذا كان router يلف بشكل أساسي السجل الفردي (إنه فردي ، أليس كذلك)؟

هل هو السماح باقتران أكثر مرونة بين مكون ومثيل محفوظات (أي منع المكون من الوصول مباشرة إلى كائن مفرد)؟ إذا كان الأمر كذلك ، ألن يتم تطبيق نفس المنطق عند الوصول إلى نسخة السجل من منشئ الإجراء؟

نعم ، وإذا قدمت مثيل السجل الخاص بك ولا تريد (أو لا تستطيع) إنشاء وحدة مفردة خاصة بك (والتي قد تكون مربكة إذا لم تكن معتادًا على أنظمة وحدات JS). إذا كنت تريد أن تفعل ذلك بنفسك ، فأنت مرحب بك لمتابعة نمطنا.

لست متأكدًا مما إذا كان من المفيد توثيق 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 هل هناك أي تحديثات لهذا الآن بعد أن تم إيقاف تشغيل React Router 3.0.0 ومقاطع الفيديو Egghead الجديدة الخاصة بك لفترة من الوقت ، وتم فتح هذا الموضوع لمدة عام؟

حرر عام 1929