عدة طرق لتحسين تطبيق رد فعل Redux

يبدو أن الحديث عن Redux في عام 2020. بعد كل شيء ، هناك العديد من البدائل الرائعة في مجال مديري الدولة ( على سبيل المثال ). بعد كل شيء ، هناك حوالي عشرة أسباب لعدم حب 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 ).

حسنًا ، في النهاية. آمل أن يجد القارئ بضع نصائح مفيدة على الأقل - وهذا يعني أنه لم يكن عبثا أن كتب. كل سمور)