Get best of the week

优化React-Redux应用程序的几种方法

看来为什么要在2020年谈论Redux。毕竟，在状态管理器领域有很多很棒的选择（例如）。毕竟，有十多种理由不喜欢Redux，关于Redux的文章很多，报告很多。但是，不能从他身上夺走一些东西-您可以在上面写一个大型，功能强大，受支持的快速网站。下面，我将讨论使用react-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 ).


好吧，非常非常的结论。我希望读者至少会发现一些有用的提示-这意味着他写的内容没有白费。海狸

More articles:


All Articles