Mehrere Möglichkeiten zur Optimierung einer React-Redux-Anwendung

Es scheint, warum sollte man 2020 über Redux sprechen? Immerhin gibt es im Bereich der Staatsmanager ( zum Beispiel ) so viele großartige Alternativen . Immerhin gibt es ungefähr ein Dutzend Gründe, Redux nicht zu lieben, über die viele Artikel geschrieben und viele Berichte gemacht wurden. Ihm kann jedoch nichts weggenommen werden - Sie können eine große, funktionale, unterstützte und schnelle Website darauf schreiben . Im Folgenden werde ich über Techniken sprechen, die dabei helfen, React-Redux zu verwenden. Interessant? Willkommen bei Katze.

Haftungsausschluss Für eine Person, die die Dokumentation sorgfältig gelesen hat, tritt keine Deckung auf. Ihr Kapitän.

Ich persönlich liebe Redux. Für Einfachheit und Minimalismus. Die Bibliothek zaubert nicht. Wo es keine Magie gibt, gibt es keine Möglichkeit, versehentlich etwas zu zerbrechen, ohne zu wissen, was Sie zerbrochen haben. Die Steuerung kehrt zu den Händen des Programmierers zurück, wodurch einerseits die Hände frei werden und andererseits bei der Verwendung Verständnis erforderlich ist. Die folgende Diskussion wird sich auf eine solche „verständnisvolle“ Verwendung konzentrieren - Techniken, die beim ersten Paar Bewusstsein und Disziplin erfordern, aber dann als etwas Natürliches wahrgenommen werden.

Über Geschäft und Zustand

Kurz über diese beiden Konzepte, damit es keine Verwirrung gibt.

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

Nun, zum Schluss. Ich hoffe, dass der Leser mindestens ein paar nützliche Tipps findet - es bedeutet, dass er nicht umsonst geschrieben hat. Alle Biber)