react-reduxप्रतिक्रिया-रेडक्स के साथ शुरुआत करना


टिप्पणियों

React Redux एक लाइब्रेरी है जो Redux के लिए React बाइंडिंग प्रदान करती है।

Redux स्टोर के बारे में प्रतिक्रियाशील घटकों को "कंटेनर", "स्मार्ट घटक" या "उच्च आदेश घटक" (HOC) कहा जाता है। ऐसे घटकों, Redux का उपयोग करने के लिए, निम्न की आवश्यकता है:

  • Redux स्टोर से अपडेट प्राप्त करने के लिए स्टोर की सदस्यता लें
  • कार्यों को डिस्पैच करें

हाथ से ऐसा करने से प्रतिक्रिया कंटेनरों में store.subscribe और store.dispatch(action) का उपयोग किया जाएगा।

रिएक्ट Redux connect फ़ंक्शन के माध्यम से Redux स्टोर और एक रिएक्ट कंटेनर घटक के बीच बाइंडिंग को सरल करता है, जो Redux स्टेट प्रॉपर्टीज़ और एक्शन क्रिएटर्स को घटक के प्रॉपर में मैप करता है।

connect एक फ़ंक्शन है जो एक उच्च आदेश घटक बनाता है। कनेक्ट 3 कार्य ( mapStateToProps , mapDispatchToProps , mergeProps ) को स्वीकार करता है और एक कंटेनर घटक देता है, जो इसे "कनेक्टेड" घटक में बदलने के लिए मूल घटक को लपेटता है:

import { connect } from 'react-redux';

const Customers = { ... };
const mapStateToProps = (state) => { ... }
const mapDispatchToProps = (dispatch) => { ... }

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

एक पूर्ण उदाहरण के लिए उदाहरण अनुभाग देखें।

चूंकि सभी कंटेनरों को रेडियंट स्टोर तक पहुंचने की आवश्यकता होती है, इसलिए अनुशंसित तरीका रिएक्ट रेडक्स के एक विशेष <Provider> घटक का उपयोग करना है, जो स्टोर को सभी बच्चों के घटकों (आंतरिक रूप से रिएक्ट संदर्भ का उपयोग करके) को पास करता है।

आधिकारिक दस्तावेज: http://redux.js.org/docs/basics/UsageWithReact.html

गिटहब रेपो: https://github.com/reactjs/react-redux

संस्करण

संस्करण रिलीज़ की तारीख
5.0.3 2017/02/23
5.0.2 2017/01/11
5.0.1 2016/12/14
5.0.0 2016/12/14
4.4.6 2016/11/14
4.4.5 2016/04/14
4.4.4 2016/04/13
4.4.3 2016/04/12
4.4.0 2016/02/06
4.3.0 2016/02/05
4.2.0 2016/02/01
4.1.0 2016/01/28
4.0.0 2015/10/15
3.0.0 2015/09/24
2.0.0 2015/09/01
1.0.0 2015/08/24
0.5.0 2015/08/07
0.1.0 2015/07/12

पूरा उदाहरण

मान लीजिए कि हमारे पास कंटेनर "CustomerContainer" है, जो Redux स्टोर में एक "ग्राहक" गूंगा घटक को जोड़ता है।

Index.js में:

import { Component }, React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import rootReducer from './redux/rootReducer';
import CustomersContainer from './containers/CustomersContainer';

let store = createStore(rootReducer);

render(
  <Provider store={store}>
    <CustomersContainer />
  </Provider>,
  document.getElementById('root')
);
 

ग्राहक सेवा में:

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

// Import action creators
import { fetchCustomers } from '../redux/actions';

// Import dumb component
import Customers from '../components/Customers';

// ES6 class declaration
class CustomersContainer extends Component {
  componentWillMount() {
    // Action fetchCustomers mapped to prop fetchCustomers
    this.props.fetchCustomers();
  }

  render() {
    return <Customers customers={this.props.customers} />;
  }
}

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

// Here we use the shorthand notation for mapDispatchToProps
// it can be used when the props and action creators have the same name 
const CustomersContainer = connect(mapStateToProps, { fetchCustomers })(CustomersContainer);

export default CustomersContainer;
 

हैलो दुनिया रिएक्ट Redux का उपयोग कर

यह मार्गदर्शिका मानती है कि आपने पहले ही react , redux , react-router और react-redux और react , redux और react-router को कॉन्फ़िगर किया है, यदि आपने ऐसा नहीं किया है, तो कृपया ऐसा करें।

नोट: react-redux की निर्भरता नहीं होने पर react-router react-redux , यह बहुत संभावना है कि हम इसे रुटिंग के लिए अपनी प्रतिक्रिया एप्लिकेशन में उपयोग करेंगे और यह हमारे लिए प्रतिक्रिया-रिडक्स का उपयोग करना वास्तव में आसान बनाता है।


FILENAME: app.js

'use strict';

import React from 'react';
import { render } from 'react-dom';
import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router';
import { Provider } from 'react-redux';
import store from './stores';

render(
  (
    <Provider store={ store }>
      <Router history={ browserHistory }>
        {/* all the routes here */}
      </Router>
    </Provider>
  ),
  document.getElementById('app')
);
 

यह फ़ाइल आप में से अधिकांश के लिए समझ में आएगी कि हम यहां क्या कर रहे हैं। स्टोर से ./stores को प्राप्त किया जा रहा है और react-redux द्वारा प्रदान किए गए हायर ऑर्डर कंपोनेंट Provider का उपयोग करके इसे सभी मार्गों पर ./stores रहा है।

यह हमारे आवेदन भर में दुकान उपलब्ध कराता है।


अब, आइए इस परिदृश्य पर विचार करें । हमारे पास एक घटक UserComponent जो user UserComponent से डेटा user और इसमें एक बटन होता है जिसे क्लिक करने पर स्टोर में डेटा अपडेट होता है।

आवेदन संरचना

हमारे rootReducer में user rootReducer है

const rootReducer = combineReducers({
    user: userReducer,
})
export default rootReducer;
 

हमारे userReducer इस तरह दिखता है

const default_state = {
  users: [],
  current_user: {
    name: 'John Doe',
    email: 'john.doe@gmail.com',
    gender: 'Male'
  },
  etc: {}
};

function userReducer( state=default_state, action ) {

  if ( action.type === "UPDATE_CURRENT_USER_DATA" ) {
    return Object.assign( {}, state, { current_user: Object.assign( {}, state.current_user, { [action.payload.field]: action.payload.value } ) } );
  }
  else {
    return state;
  }

}

export default userReducer;
 

और हमारी actions फ़ाइल कुछ इस तरह दिखती है

export function updateCurrentUserData( data ) {
  return {
    type: "UPDATE_CURRENT_USER_DATA",
    payload: data
  }
}
 

अंत में, हमारे घटक पर काम करते हैं

FILENAME: UserComponent.js

'use strict';

import React from 'react';
import { connect } from 'react-redux';
import * as Action from './actions';

let UserComponent = (props) => {

  let changeUserDetails = (field, value) => {
    // do nothing
  }

  return(
    <div>
      <h1>Hello { props.current_user.name }</h1>
      <p>Your email address is { props.current_user.email }</p>
      <div style={{ marginTop: 30 }}>
        <button onClick={ () => { changeUserDetails('name', 'Jame Smith') } }>Change Name</button>
        <button onClick={ () => { changeUserDetails('email', 'jane@gmail.com') } }>Change Email Address</button>
      </div>
    </div>
  )

}

export default UserComponent;
 

बेशक, यह काम नहीं करेगा , क्योंकि हमने इसे अभी तक स्टोर से नहीं जोड़ा है।

यदि आप सोच रहे हैं, तो यह एक स्टेटलेस फंक्शनल कंपोनेंट है , क्योंकि हम redux का उपयोग कर रहे हैं और हमें अपने कंपोनेंट के लिए वास्तव में आंतरिक स्थिति की आवश्यकता नहीं है, यह इसका उपयोग करने का सही समय है।

react-redux द्वारा प्रदान की गई connect विधि तीन मापदंडों में ले जाती है

mapStateToProps , mapDispatchToProps और घटक स्वयं।

connect( mapStateToProps, mapDispatchToProps )(Component)


आइए, हमारे घटक UserComponent को mapStateToProps और mapDispatchToProps के साथ कनेक्ट करें

और भी अद्यतन हमारे changeUserDetails, कार्य करते हैं इसलिए जब कहा जाता है, यह होगा dispatch एक action हमारे लिए reducers , और कार्रवाई के प्रकार हमारे कम करने में लात और दुकान में परिवर्तन कर देगा के आधार पर, और स्टोर अद्यतन एक बार react-redux फिर होगा नए डेटा के साथ हमारे घटक को भेजें।

जटिल लगता है? यह वास्तव में नहीं है।

हमारा UserComponent.js जैसा दिखेगा

'use strict';

import React from 'react';
import { connect } from 'react-redux';
import * as Action from './actions';

const mapStateToProps = ( state, ownProps ) => {
  return {
    current_user: state.user.current_user,
  }
}

const mapDispatchToProps = ( dispatch, ownProps ) => {
  return {
    updateCurrentUserData: (payload) => dispatch( Action.updateCurrentUserData(payload) ),
  }
}


let UserComponent = (props) => {

  let changeUserDetails = (field, value) => {
    props.updateCurrentUserData({ field: field, value: value });
  }

  return(
    <div>
      <h1>Hello { props.current_user.name }</h1>
      <p>Your email address is { props.current_user.email }</p>
      <div style={{ marginTop: 30 }}>
        <button onClick={ () => { changeUserDetails('name', 'Jame Smith') } }>Change Name</button>
        <button onClick={ () => { changeUserDetails('email', 'jane@gmail.com') } }>Change Email Address</button>
      </div>
    </div>
  )

}

const ConnectedUserComponent = connect(
  mapStateToProps,
  mapDispatchToProps
)(UserComponent)

export default ConnectedUserComponent;
 

हमने यहां जो किया वह जोड़ा है

  • mapStateToProps : यह हमें स्टोर से डेटा प्राप्त करने की अनुमति देता है और जब वह डेटा बदलता है, तो हमारे घटक को नए डेटा के साथ फिर से प्रदान किया जाएगा।

    हमारे घटक केवल फिर से प्रस्तुत करना होगा डेटा हमारे घटक की दुकान में दुकान में परिवर्तन और नहीं जब किसी भी अन्य डेटा परिवर्तन का अनुरोध कर रहा है।

  • mapDispatchToProps : यह हमें हमारे घटक से सभी रिड्यूसर को dispatch actions अनुमति देता है .. (कोई भी घटक हो सकता है), और कार्रवाई के type के आधार पर, हमारा उपयोगकर्ता रीडर्स अपडेटेड डेटा के साथ एक नया राज्य लौटाएगा और वापस आएगा।

  • ConnectedUserComponent : अंत में, हमने अपने कंपोनेंट को connect करने के connect सभी मापदंडों को पार करके connect विधि का उपयोग करके स्टोर से connect exported और कनेक्टेड कंपोनेंट को exported

  • हमने प्रॉप्स पर कॉल method और डेटा में पास होने के लिए अपने चेंज यूटरडेल्स फ़ंक्शन को भी अपडेट किया है। और props बदले में उस विधि को भेजते हैं जिसे हमने सभी रिड्यूसर्स को कॉल किया है।


ध्यान दें:

  • यदि हम react-redux से नया राज्य नहीं लौटाते हैं, तो react-redux हमारे घटक को फिर से प्रस्तुत नहीं करेगा।

स्थापना या सेटअप

का उपयोग करते हुए redux के साथ सीधे react हो सकती है हर के लिए थोड़ा मुश्किल लगता है, के रूप में component आप अद्यतन करना चाहते हैं की दुकान में परिवर्तन, आप के लिए है कि घटक सदस्यता के लिए जब redux store

रिएक्ट रिडक्स इन सभी का ध्यान रखता है और घटकों को लिखना वास्तव में आसान बनाता है जो redux store से इसके लिए आवश्यक डेटा का अनुरोध कर सकते हैं और केवल तभी सूचित किया जा सकता है जब वे डेटा बदलते हैं। यह हमें वास्तव में प्रभावी घटकों को लिखने की अनुमति देता है।

react-redux को स्थापित करने के लिए आपको बस इतना करना होगा कि यह npm कमांड चलाएं

npm install --save react-redux
 

और आपने कल लिया।


नोट: रिएक्ट Redux पर निर्भर है

  • प्रतिक्रिया (संस्करण 0.14 या बाद के संस्करण) और
  • Redux