store.getState или mapStateToProps в компоненте

Question

У меня вопрос, в чем разница между использованием getState из магазина напрямую или использованием mapStateToProps. Пожалуйста, посмотрите на меня пример ниже

import React, { Component } from 'react'
import store from '../store'
import { connect } from 'react-redux';

class Test extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <p>
        <h1>{this.props.count}</h1>
        <h2>{store.getState().reducer1.count}</h2>
      </p>
    )
  }
}

const mapStateToProps = (state) => ({
  count: state.reducer1.count
});

// export default Test;
export default connect(mapStateToProps)(Test);

Оба store.getState и mapStateToProps выше работают нормально, они все еще обновляются при изменении состояния. Если мы просто используем только getState, нам не нужно использовать метод connect .

Еще один момент, который я распознал, - это когда mapStateToProps с connect , в редукторе мы должны вернуть новую копию состояния объекта, чем вернуть это состояние с модификацией. Если нет, компонент не будет обновляться при изменении состояния. Как это:

return Object.assign({}, state, {
        count: state.count + 1,
        payload: action.payload,
      });

Но если мы используем store.getState () , мы можем либо вернуть новую копию, либо пересмотренную. Как это:

state.count++;
state.payload = action.payload;
return state

Кто-нибудь знает, пожалуйста, объясните мне, спасибо.

P / S: и аналогично store.dispatch против mapDispatchToProps, эти 2 будут работать нормально, просто хочу знать, почему мы должны использовать mapToProps с connect вместо вызова функции напрямую из хранилища.

Answer 1

mapStateToProps - это просто вспомогательная функция, которая очень полезна для управления проектом в модульном стиле. Например, вы можете даже разместить всю логику подключения в отдельных файлах и использовать там, где хотите.

Предположим, если вы работаете с крупномасштабным приложением, то угадайте какие-то свойства, вложенные туда. Используя connect, вы на самом деле модулируете проект, что очень полезно для разработчиков, которые следят за проектом.

Если нет, вы пишете несколько строк кода в одном файле.

---

Возможная проблема, с которой вы столкнетесь при использовании getState () или dispatch () напрямую. Посмотрите эту запись , чтобы немного прояснить ситуацию.

---

Ключевым преимуществом использования connect является то, что вам не нужно беспокоиться об изменении состояния с помощью store.subscribe (), connect сообщит вам о каждом изменении состояния при каждом получении обновлений.

Кроме того, концепция реагирующего ядра основана на реквизите и состояниях. Использование connect позволяет вам получить состояние приставки в качестве реквизита. Использование this.props:)

И я вспомнил, при каких условиях я обращался к магазину напрямую, а не через соединение. В моем проекте мне нужно было сохранить все избыточное состояние в другой форме, и мне не нужно было подключать его к какому-либо компоненту. В этом случае прямое использование с избыточным магазином очень просто и полезно. Но если мы попробуем то же самое с connect в этом случае, у нас будет трудное время.

Таким образом, я бы предложил вам использовать их в отдельном состоянии.

1. Используйте connect, если вы хотите сопоставить с компонентом.
2. Получите прямой доступ к избыточному хранилищу, если вам не нужно сопоставлять с компонентом.

---

Кроме того, этот блог расскажет немного больше: объяснение реагирует на редукцию

Redux Flow:

Использование соединения с реагирующим компонентом:

В заключение: используя connect, вы используете провайдера, и он позволяет каждому дочернему компоненту получать доступ к хранилищу, предоставляя провайдера и используя реквизиты магазина в корневом компоненте приложения.