Может ли Redux подключить любое состояние и диспетчеризацию действий к любому компоненту?

Question

Это приложение представляет собой простой счетчик ... Кто-нибудь знает, как заставить приложение отображать счетчик (кроме счетчика, показывающего его)? Можете ли вы отредактировать онлайн и разослать копию, если можете?

https://stackblitz.com/edit/react-kkcgza?file=App.js

Я могу подключить «состояние и действие» к компоненту «Счетчик», как показано ниже:

let connectedComponent = connect(
    mapStateToProps,
    mapDispatchToProps
)(Counter);

export default connectedComponent;

Должен ли я сделать то же самое для App? Я не совсем понимаю принцип: сначала у вас есть «один-единственный» источник правды (хранилище редуксов), а затем вы можете произвольно подключить любое состояние и / или действие к любому компоненту, так что любой Компонент может иметь любое состояние и диспетчеризацию, а повторный рендеринг сведен к минимуму?

Так что Redux действительно «хранилище данных и подпорка»?

Цитата из Learning React, 2nd Ed, Kirupa Чиннатхамби, Аддисон-Уэсли 2018:

Вы можете инициировать изменение состояния и задействовать только те компоненты, на которые воздействует напрямую. Эта прямолинейность уменьшает много накладных расходов, которые в противном случае вам пришлось бы поддерживать, чтобы гарантировать, что ваши данные (и любые изменения в них) попадут по назначению, не вызывая ненужных визуализаций. Довольно круто, правда?

Answer 1

Вы можете использовать перевыбрать для выбранных состояний, например countValue с лучшими практиками и производительностью, а затем для получения дополнительной информации см. Ссылку ниже

Вы можете увидеть это ответ за лучшую практику работы с реаги и редуксом

Answer 2

Просто сделайте

import React from "react";
import Counter from "./Counter";
import { connect } from 'react-redux';

function App(props) {
  console.log("APP is re-rendering", props);

  return (
   <div>
    App Cunter: {props.countValue}
    <br/>
    App says hello
    <Counter />
   </div>
  );
}


export default connect( state => ({countValue: state.count}))(App)

Вам нужно только подключить компонент приложения таким образом, чтобы достичь желаемого

Answer 3

Вы не подключите компонент root (который я предполагаю <App>) к хранилищу, но, вероятно, отобразите другой компонент, который подключен. Предполагая, что у вас есть такая структура:

<MyStoreProvider>
    <App>
        <SomeComponent>
            <CounterDisplay />
        </SomeComponent>
        <Counter />
    </App>
</MyStoreProvider>

, где CounterDisplay подключен к вашему магазину:

const CounterDisplay = ({count}) => (
    <p>{`The count is ${count}`}</p>
);

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

export default connect(mapStateToProps)(CounterDisplay);

Обычно вы пытаетесь поддерживать соединение как можно ближе к компонентам, которые на самом деле нужны состояния или действия для предотвращения повторного рендеринга всего дерева и уменьшения необходимости передачи состояния вниз.

Еще проще использовать с hooks :

const CounterDisplay = () => {
    const count = useSelector(state => state.count);

    return (
        <p>{`The count is ${count}`}</p>
    );
};

Значит, Redux действительно «хранилище данных и подпорка»?

Вы могли бы так назвать. Это библиотека управления состоянием, которая позволяет вам подписываться на изменения состояния и обновлять состояние не изменяющим приемлемым образом (например, чтобы позволить перемещаться во времени через изменения вашего состояния). Это может фактически использоваться полностью без реакции. Фактические привязки, которые позволяют удобно использовать его с реакцией, находятся в отдельном пакете react-redux.