Как повторно использовать компонент в React и Redux? - PullRequest
Новая
       33

Как повторно использовать компонент в React и Redux?

0 голосов
/ 15 марта 2020

Может быть, я не понял концепции правильно. Обычно я вижу в примерах класс Counter, затем mapStateToProps и mapDispatchToProps, а затем с помощью connect создайте «Компонент высшего порядка» и экспортируйте его в качестве значения по умолчанию.

Интересно, как мы можем повторно использовать этот Counter компонент?

Например:

  1. Если нам нужно два экземпляра Counter на одной странице
  2. Если нам нужно Counter на странице 2, и оно должно быть связано с другим состоянием редукции (а не с тем, которое мы определили в этом исходном файле)

И тогда меня осенило: оно кажется в На практике мы можем просто определить Counter.js без всех этих mapStateToProps, mapDispatchToProps и connect, а затем мы создадим IceCreamCounter.js, который сначала import Counter (простой счетчик), и выполнит все mapStateToProps, mapDispatchToProps и connect, чтобы превратить его в один HO C и экспортировать его?

И затем, если той же странице нужен другой счетчик, мы используем mapStateToProps, mapDispatchToProps, и connect в, например, DrinkCounter.js и выполните соответствующие сопоставления с хранилищем редуксов.

Аналогично, если это страница "Кому" Go Порядок ", и нам нужен счетчик для количества необходимых ложек, тогда у нас фактически будет mapStateToProps, mapDispatchToProps и connect и мы создадим SpoonCounter.js: 

import { connect } from 'react-redux';

import Counter from './Counter';  // the plain counter component

const mapStateToProps = ...;
const mapDispatchToProps = ...;

const SpoonCounter = connect(mapStateToProps, mapDispatchToProps)(Counter);
export default SpoonCounter;

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

Интересно, почему я не видел, как это делается раньше ... это действительно объясняется в некоторых официальных документах или блогах?

1 Ответ

1 голос
/ 15 марта 2020

Не официальный do c, по сути, но из довольно "официального" источника. Шаблон компонента контейнера. Это сообщение, которое меня привлекло к шаблону.

https://medium.com/@dan_abramov / smart-and-dumb-components-7ca2f9a7c7d0

Здесь вы наткнулись на него , Компонент «тупой» счетчик - это компонент представления, визуальный аспект, пользовательский интерфейс, тогда как, в вашем случае, react-redux connect HO C возвращает «умный» компонент, он подключается осязаемые данные, такие как состояние вашего приложения, для компонента представления.

...