Вопрос: React-redux connect () mapStateToProps вызывается несколько раз при навигации с помощью ретранслятора


У меня простой маршрутизатор (начался с redux-router и переключился на react-router для устранения переменных).

<Router history={history}>
  <Route component={Admin} path='/admin'>
    <Route component={Pages} path='pages'/>
    <Route component={Posts} path='posts'/>
  </Route>
</Router>

Компонент Admin в основном просто {this.props.children} с некоторыми nav; это не connected.

Компонент Pages - это connectс компонентом mapStateToProps() вот так:

function mapStateToProps (state) {
  return {
    pages: state.entities.pages
  };
}

Сообщения еще интереснее:

function mapStateToProps (state) {
  let posts = map(state.entities.posts, post => {
    return {
      ...post,
      author: findWhere(state.entities.users, {_id: post.author})
    };
  }

  return {
    posts
  };
}

И затем, когда я загружаю страницу или переключаюсь между маршрутами Posts / Pages, я получаю следующее в моей консоли.log ().

// react-router navigate to /posts

Admin render()
posts: map state to props
Posts render()
posts: map state to props
Posts render()
posts: map state to props

// react-router navigate to /pages

Admin render()
pages: map state to props
Pages render()
pages: map state to props

Поэтому мой вопрос: почему mapStateToProps вызывается несколько раз при изменении маршрута?

Кроме того, почему map функции в mapStateToProps вызывать его в третий раз в контейнере Posts?

Я использую основные logger а также crashReporter middlewares из документов Redux, и он не сообщает о каких-либо изменениях состояния или сбоях. Если состояние не меняется, почему компоненты отображаются несколько раз?


11


источник


Ответы:


Выбирать  позволяет создавать memoized селекторные функции для производной обработки состояния.

Документация Redux  объясняет пример использования. Быстрый образ тоже имеет пример.


0



По опыту react-redux, вы не должны обрабатывать атрибуты магазина внутри mapStateToProps потому как connect использует мелкую проверку привязанных атрибутов хранилища для проверки diff ,

Чтобы проверить, нужно ли обновлять компонент, react-redux звонки mapStateToProps и проверяет атрибуты первого уровня результата. Если один из них изменился ( === проверка равенства), компонент будет обновляться с помощью новых реквизитов. В вашей ситуации posts изменение ( map преобразовать) каждый раз mapStateToProps получает вызов, поэтому ваш компонент обновляется при каждом изменении магазина!

Ваше решение должно было бы вернуть только прямые ссылки на атрибуты вашего магазина:

function mapStateToProps (state) {
  return {
    posts: state.entities.posts,
    users: state.entities.users
  };
}

Затем в вашем компоненте вы можете определить функцию, которая обрабатывает ваши данные по запросу:

getPostsWithAuthor() {
  const { posts, users } = this.props;

  return map(posts, post => {
    return {
      ...post,
      author: findWhere(users, {_id: post.author})
    };
  });
}

9