Beberapa Cara untuk Mengoptimalkan Aplikasi React-Redux

Tampaknya mengapa berbicara tentang Redux pada tahun 2020. Lagi pula, ada begitu banyak alternatif hebat di bidang manajer negara ( misalnya ). Lagipula, ada sekitar selusin alasan untuk tidak mencintai Redux, tentang mana banyak artikel telah ditulis, dan banyak laporan telah dibuat. Namun, sesuatu tidak dapat diambil darinya - Anda dapat menulis situs web besar, fungsional, didukung dan cepat di atasnya. Di bawah ini saya akan berbicara tentang teknik yang membantu melakukan ini menggunakan react-redux. Menarik? Selamat datang di kucing.

Penolakan Untuk orang yang telah membaca dokumentasi dengan cermat, kerusakan sampul tidak akan terjadi. Kapten kamu.

Secara pribadi, saya suka Redux. Untuk kesederhanaan dan minimalis. Perpustakaan tidak memiliki keajaiban. Di mana tidak ada sihir, tidak ada cara untuk secara tidak sengaja memecahkan sesuatu, tidak tahu apa yang Anda rusak. Kontrol kembali ke tangan programmer, yang, di satu sisi, membebaskan tangan, dan di sisi lain, membutuhkan pemahaman saat menggunakannya. Diskusi di bawah ini akan fokus pada penggunaan "pemahaman" seperti itu - teknik yang pada pasangan pertama membutuhkan kesadaran dan disiplin, tetapi kemudian mereka dianggap sebagai sesuatu yang alami.

Tentang toko dan negara

Secara singkat tentang dua konsep ini, sehingga tidak ada kebingungan.

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

Nah, dalam kesimpulan yang sangat, sangat. Saya berharap bahwa pembaca akan menemukan setidaknya beberapa tips yang bermanfaat - itu berarti tidak sia-sia bahwa ia menulis. Semua berang-berang)