कनेक्ट w / Redux का उपयोग करके इस से साधारण प्रेषण कैसे प्राप्त करें?

Question

मुझे एक सरल रिएक्ट घटक मिला है जिसे मैं कनेक्ट करता हूं (एक साधारण सरणी / स्थिति को मैप करना)। स्टोर के लिए संदर्भ को संदर्भित करने से रखने के लिए, मैं सीधे प्रॉप्स से "प्रेषण" प्राप्त करने का एक तरीका चाहूंगा। मैंने दूसरों को इस दृष्टिकोण का उपयोग करते देखा है, लेकिन किसी कारण से इस तक पहुंच नहीं है :)

यहां प्रत्येक npm निर्भरता के संस्करण दिए गए हैं जो मैं वर्तमान में उपयोग कर रहा हूं

"react": "0.14.3",
"react-redux": "^4.0.0",
"react-router": "1.0.1",
"redux": "^3.0.4",
"redux-thunk": "^1.0.2"

यहाँ घटक w / कनेक्ट विधि है

class Users extends React.Component {
    render() {
        const { people } = this.props;
        return (
            <div>
                <div>{this.props.children}</div>
                <button onClick={() => { this.props.dispatch({type: ActionTypes.ADD_USER, id: 4}); }}>Add User</button>
            </div>
        );
    }
};

function mapStateToProps(state) {
    return { people: state.people };
}

export default connect(mapStateToProps, {
    fetchUsers
})(Users);

यदि आपको रिड्यूसर (रोमांचक कुछ भी नहीं है, लेकिन यह देखना है)

const initialState = {
    people: []
};

export default function(state=initialState, action) {
    if (action.type === ActionTypes.ADD_USER) {
        let newPeople = state.people.concat([{id: action.id, name: 'wat'}]);
        return {people: newPeople};
    }
    return state;
};

यदि आपको यह देखने की आवश्यकता है कि मेरा राउटर w / redux कैसे कॉन्फ़िगर किया गया है

const createStoreWithMiddleware = applyMiddleware(
      thunk
)(createStore);

const store = createStoreWithMiddleware(reducers);

var Route = (
  <Provider store={store}>
    <Router history={createBrowserHistory()}>
      {Routes}
    </Router>
  </Provider>
);

अपडेट करें

ऐसा लगता है कि अगर मैं कनेक्ट में अपना स्वयं का डिस्पैच छोड़ता हूं (वर्तमान में ऊपर मैं fetchUsers दिखा रहा हूं), तो मुझे डिस्पैच फ्री मिलेगा (बस यह निश्चित नहीं है कि यह सेटअप w / async क्रिया आमतौर पर कैसे काम करेगी)। क्या लोग मिश्रण करते हैं और मेल खाते हैं या यह सब है या कुछ भी नहीं है?

[MapDispatchToProps]

Answer 1

डिफ़ॉल्ट रूप mapDispatchToPropsसे बस है dispatch => ({ dispatch })।
इसलिए यदि आप दूसरे तर्क को निर्दिष्ट नहीं करते हैं connect(), तो आप dispatchअपने घटक में एक प्रस्ताव के रूप में अंतःक्षिप्त हो जाएंगे ।

यदि आप कोई कस्टम फ़ंक्शन पास करते हैं mapDispatchToProps, तो आप फ़ंक्शन के साथ कुछ भी कर सकते हैं।
कुछ उदाहरण:

// inject onClick
function mapDispatchToProps(dispatch) {
  return {
    onClick: () => dispatch(increment())
  };
}

// inject onClick *and* dispatch
function mapDispatchToProps(dispatch) {
  return {
    dispatch,
    onClick: () => dispatch(increment())
  };
}

आपको बचाने के लिए कुछ टाइपिंग Redux प्रदान करता bindActionCreators()है जो आपको इसे चालू करने देता है:

// injects onPlusClick, onMinusClick
function mapDispatchToProps(dispatch) {
  return {
    onPlusClick: () => dispatch(increment()),
    onMinusClick: () => dispatch(decrement())
  };
}

इस मामले में:

import { bindActionCreators } from 'redux';

// injects onPlusClick, onMinusClick
function mapDispatchToProps(dispatch) {
  return bindActionCreators({
    onPlusClick: increment,
    onMinusClick: decrement
  }, dispatch);
}

या इससे भी कम जब प्रोप नाम एक्शन क्रिएटर नामों से मेल खाता है:

// injects increment and decrement
function mapDispatchToProps(dispatch) {
  return bindActionCreators({ increment, decrement }, dispatch);
}

यदि आप चाहें, तो आप निश्चित रूप से dispatchवहां हाथ जोड़ सकते हैं :

// injects increment, decrement, and dispatch itself
function mapDispatchToProps(dispatch) {
  return {
    ...bindActionCreators({ increment, decrement }), // es7 spread syntax
    dispatch
  };
}

इस पर कोई आधिकारिक सलाह नहीं है कि आपको यह करना चाहिए या नहीं। connect()आमतौर पर Redux-जागरूक और Redux-अनजान घटकों के बीच सीमा के रूप में कार्य करता है। यही कारण है कि हम आम तौर पर महसूस करते हैं कि यह बाध्य क्रिया रचनाकारों और दोनों को इंजेक्ट करने का कोई मतलब नहीं है dispatch। लेकिन अगर आपको ऐसा लगता है कि आपको ऐसा करने की जरूरत है, तो बेझिझक।

अंत में, जिस पैटर्न का आप अभी उपयोग कर रहे हैं वह एक शॉर्टकट है जो कॉल करने से भी छोटा है bindActionCreators। जब आप सभी करते हैं bindActionCreators, तो आप ऐसा करने के बजाय कॉल को छोड़ सकते हैं:

// injects increment and decrement
function mapDispatchToProps(dispatch) {
  return bindActionCreators({ increment, decrement }, dispatch);
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

इस रूप में लिखा जा सकता है

export default connect(
  mapStateToProps,
  { increment, decrement } // injects increment and decrement
)(App);

लेकिन जब भी आप कुछ और रिवाज चाहते हैं, तो आपको उस छोटे शॉर्ट सिंटैक्स को छोड़ना होगा, जैसे कि गुजरना dispatch।

Comments

@DanAbramov btw bindActionCreators(actionCreators, dispatch)वैकल्पिक में दूसरा पैरामीटर है ? मैंने // es7 spread syntaxलाइन में आपके कोड पर ध्यान dispatchदिया bindActionCreators

— yonasstephen

वेतन वृद्धि विधि के अंदर क्या है?

— खुर्शीद अंसारी

es7 स्प्रेड सिंटैक्स होना चाहिए function mapDispatchToProps(dispatch) { return { ...bindActionCreators({ increment, decrement }), dispatch }; }

— ब्लैक

Answer 2

आप आमतौर पर जो चाहें, उसके आधार पर मिश्रण और मिलान कर सकते हैं।

आप कर सकते हैं पारित dispatchएक आधार के रूप में पर अगर है कि तुम क्या चाहते:

export default connect(mapStateToProps, (dispatch) => ({
    ...bindActionCreators({fetchUsers}, dispatch), dispatch
}))(Users);

मुझे यकीन है कि कैसे नहीं कर रहा हूँ fetchUsersप्रयोग किया जाता है (एक async समारोह के रूप में?), लेकिन आप आमतौर पर की तरह कुछ का प्रयोग करेंगे bindActionCreatorsकरने के लिए स्वत: बाँध का उपयोग कर के बारे में प्रेषण और चिंता करने के लिए तो आप नहीं होगा dispatchजुड़ा घटकों में सीधे।

dispatchजोड़ों की निर्देशिका प्रकार का उपयोग करते हुए गूंगा , स्टैडलेस कंपोनेंट को रिडक्स के साथ प्रयोग किया जाता है। जो इसे कम पोर्टेबल बना सकता है।

Comments

आप जो सुझाव दे रहे हैं वह काम नहीं करेगा। आपको एक अनबाउंड fetchUsersइंजेक्शन के रूप में मिलेगा । शॉर्टकट नोटेशन केवल तभी काम करता है जब आप किसी ऑब्जेक्ट को दूसरे तर्क के रूप में पास करते हैं। जब आप एक फ़ंक्शन पास करते हैं तो आपको bindActionCreatorsखुद को कॉल करना होगा dispatch => ({ ...bindActionCreators({ fetchUsers }, dispatch), dispatch }):।

— दान अब्रामोव

क्यों फैला और सीधे bindActionCreators में प्रेषण? dispatch => ( bindActionCreators({ dispatch, fetchUsers }, dispatch))

— user3711421

Answer 3

जब आप इसके dispatchभाग के रूप में नीचे जा सकते हैं dispatchToProps, तो मैं आपके घटकों के भीतर storeया dispatchसीधे पहुँचने से बचने की सलाह दूंगा । ऐसा लगता है कि कनेक्ट के 2 तर्क में एक बाध्य एक्शन क्रिएटर में पास होने से आपको बेहतर सेवा मिलेगीdispatchToProps

एक उदाहरण देखें जिसे मैंने यहां पोस्ट किया है https://stackoverflow.com/a/34455431/2644281 , कैसे "पहले से ही बंधे हुए एक्शन क्रिएटर" को पास किया जाए, इस तरह से आपके घटकों को सीधे स्टोर के बारे में जानने या उस पर निर्भर रहने की आवश्यकता नहीं है। ।

संक्षिप्त होने के लिए क्षमा करें। मैं w / अधिक जानकारी अपडेट करूंगा।