एक रिएक्ट-रिडक्स एप्लिकेशन को ऑप्टिमाइज़ करने के कई तरीके

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

अस्वीकरण ऐसे व्यक्ति के लिए जिसने ध्यान से प्रलेखन पढ़ा है, कवर टूटने की घटना नहीं होगी। आपका कप्तान

निजी तौर पर, मुझे Redux बहुत पसंद है। सादगी और अतिसूक्ष्मवाद के लिए। पुस्तकालय कोई जादू नहीं करता। जहां कोई जादू नहीं है, वहां गलती से किसी चीज को तोड़ने का कोई तरीका नहीं है, न कि यह जानना कि आप क्या थे। नियंत्रण प्रोग्रामर के हाथों में लौटता है, जो एक तरफ, हाथों को मुक्त करता है, और दूसरे पर, इसका उपयोग करने के लिए समझने की आवश्यकता होती है। नीचे दी गई चर्चा सिर्फ ऐसे "समझ" उपयोग - तकनीकों पर ध्यान केंद्रित करेगी जो पहले जोड़े पर जागरूकता और अनुशासन की आवश्यकता होती है, लेकिन फिर उन्हें कुछ स्वाभाविक माना जाता है।

दुकान और राज्य के बारे में

संक्षेप में इन दो अवधारणाओं के बारे में, ताकि कोई भ्रम न हो।

Store redux — , state , state, state, - . ""

State redux-store , , , , , . State . ""

mapStateToProps

connect, , HOC-, store . connect mapStateToProps. mapStateToProps . mapStateToProps ( , ).

1 mapStateToProps.

,

const mapStateToProps = () => {
  return {
    units: [1, 2, 3]
  }
}

const UNITS = [1, 2, 3];

const mapStateToProps = () => {
  return {
    units: UNITS
  }
}

, react-redux , . mapStateToProps . mapStateToProps shallowEqual ( ). .. , , .

, [1, 2, 3], shallowEqual . , .

, return- mapStateToProps , . , , - . UNITS - selectUserUnits(state, userId). .

reselect

.. state — , : state.todos[42].title. , . , . , redux .

reselect — , . -, readme , . -, reselect . -, ( , ) .

2 reselect , .

. , , , mapStateToProps.

reselect . , :

export const selectPriceWithDiscountByProductId = (state, id) => {
  const {price, discount} = state.product[id];

  return {price, discount};
};

export const selectTagsByProductId = (state, id) => state.product[id].tags || [];

, mapStateToProps, . , tags. , reselect ( faiwer — :) ).

, :

const EMPTY_ARRAY = Immutable([]);

export const selectTagsByProductId = (state, id) => state.product[id].tags || EMPTY_ARRAY;

3 reselect , .

. . const selectUserById = (state, id) => state.user[id] ,

reselect . , createSelector, .

createSelector(...inputSelectors | [inputSelectors], resultFunc)

inputSelectors — , . resultFunc, .

// selectors.js

const selectUserTagById = (state, userId) => state.user[userId].tag;
const selectPictures = state => state.picture;

const selectRelatedPictureIds = createSelector(
  selectUserTagById,
  selectPictures,
  (tag, pictures) => (
     Object.values(pictures)
       .filter(picture => picture.tags.includes(tag))
       .map(picture => picture.id)
  )
)

, , , . , .

, reselect , :

• ( shallowEqual), . , id , reselect
• inputSelectors ( shallowEqual), . , - , reselect selectUserTagById selectPictures. pictures tag, reselect .

4 .

selectUser({user}) inputSelectors

. reselect, : 1. , . , . , RelatedPictures,

// RelatedPicturesContainer.js

import {connect} from 'react-redux';
import {RelatedPictures} from '../components';
import {selectRelatedPictureIds} from '../selectors';

const mapStateToProps = (state, {userId}) => {
  return {
    pictureIds: selectRelatedPictureIds(state, userId)
  }
};

export default connect(mapStateToProps)(RelatedPictures);

const RelatedPicturesList = ({userIds}) => (
  <div>
    {Array.isArray(userIds) && (
      userIds.map(id => <RelatedPictureContainer userId={id} />
    )}
  </div>
)

RelatedPicturesList , RelatedPictureContainer mapStateToProps pictureIds, selectRelatedPictureIds userId . , , RelatedPictures ShouldComponentUpdate, .

reselect

5 .

, mapStateToProps , . react-redux , mapStateToProps, , mapStateToProps

// selectors.js
const selectUserTagById = (state, id) => state.user[id].tag;
const selectPictures =  (state, id) => state.picture;

const createRelatedPictureIdsSelector = () => createSelector(
  selectUserTagById,
  selectPictures,
  (tag, pictures) => (
     Object.values(pictures)
       .filter(picture => picture.tags.includes(tag))
       .map(picture => picture.id)
  )
)

// RelatedPicturesContainer.js

import {connect} from 'react-redux';
import {RelatedPictures} from '../components';
import {createRelatedPictureIdsSelector} from '../selectors';

const createMapStateToProps = () => {
  const selectRelatedPictureIds = createRelatedPictureIdsSelector();

  return (state, {userId}) => {
    return {
      pictureIds: selectRelatedPictureIds(state, userId)
    };
  };
};

export default connect(createMapStateToProps)(RelatedPictures);

RelatedPicturesContainer selectRelatedPictureIds. 1. - userId, . . , react-, relatedPictureIds , GC .

. "? ? , , ?". re-reselect, . , mapStateToProps

6 re-reselect

. , . , , , , , Node.js Server Side Rendering. , , , .

connect

mapStateToProps. , connect ' .

connect(mapStateToProps, mapDispatchToProps, mergeProps, options)

, react-redux . , mapStateToProps (state), . mapDispatchToProps.

7 mapStateToProps mapDispatchToProp connect'

, mergeProps . mergeProps ( ) mapStateToProps mapDispatchToProps. , , , . . , : connect(mapStateToProps, null, x => x).

react-redux . , mapStateToProps null, ( , ). , . mapStateToProps ( ), mergeProps .

, options connect. . , mapStateToProps, mapDispatchToProps mergeProps shallowEqual. . , mapStateToProps.

8 connect, . , shouldComponentUpdate — .

redux . -, . , .

React-redux — . , ( MVVM). , , . , , . shouldComponentUpdate (useRef ).

खैर, बहुत, बहुत निष्कर्ष में। मुझे उम्मीद है कि पाठक को कम से कम कुछ सुझाव उपयोगी मिलेंगे - इसका मतलब है कि यह व्यर्थ नहीं था जो उन्होंने लिखा था। सभी बीवर)