Почему мое представление React не обновляется при изменении хранилища избыточности?

Question

Я новичок в React и Redux.Я пытался создать счетчик, чтобы научиться работать с Redux, но не могу обновить представление или вызвать mapStateToProps.Я просмотрел страницу устранения неполадок с Redux и просмотрел ряд похожих тем, размещенных здесь.Может кто-нибудь помочь мне определить, что не так с этим кодом?

import React from 'react'
import { render } from 'react-dom'
import { Provider, connect } from 'react-redux'
import { createStore } from 'redux'

import './index.scss';

let Counter = props => {
    console.log('>>> counter', props)
    return (
        <div>
            <h1>counter (Redux Version)</h1>
            <p>count: {props.count}</p>
        </div>
    );
}

let increment = () => {
    return {
        type: 'INC'
    }
}

const counterReducer = (state = {count: 0}, action) => {
    switch (action.type) {
        case 'INC':
            console.log('>>> inc');
            return { count: state.count + 1 };
        default:
            return state;
    }
}

const mapStateToProps = state => {
    console.log('>>> map state to props', state);
    return { count: state.counterReducer.count };
};

const store = createStore(counterReducer);
connect(mapStateToProps, null)(Counter);

render(
    <Provider store={store}>
        <Counter count={0}/>
    </Provider>,
    document.getElementById('root')
);

window.store = store;
window.increment = increment;

Используя консоль Chrome, я могу увидеть состояние магазина, а затем отправить событие увеличения.Когда я делаю это, я вижу, что состояние в хранилище обновилось правильно, но значение, показанное в теге абзаца, по-прежнему показывает 0.

store.getState()
  {count: 0}

store.dispatch(increment());
  VM1382:1 >>> inc
  {type: "INC"}

store.getState()
  {count: 1}

Answer 1

Counter не обновляется при отправке, поскольку Counter в render на самом деле не является подключенным компонентом.

Согласно документации на connect (https://react -redux.js.org / api / connect ):

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

Это означает, что простой вызов connect(mapStateToProps, null)(Counter); не будет мутировать Counter, но вместо этого он вернет подключенную версию. Этот возвращенный компонент - то, что вы хотите.

Быстрое решение проблемы - сохранить возвращаемое значение connect:

const ConnectedCounter = connect(mapStateToProps)(Counter);

и использовать ConnectedCounter вместо Counter в рендере:

<Provider store={store}>
  <ConnectedCounter count={0}/>
</Provider>

---

При подключении компонентов к хранилищу я предлагаю реализовать компонент в его собственном файле jsx и экспортировать подключенный компонент по умолчанию.

В Counter.jsx мы можем иметь ...

import { connect } from 'react-redux';

const Counter = props => {
  console.log('>>> counter', props)
  return (
      <div>
          <h1>counter (Redux Version)</h1>
          <p>count: {props.count}</p>
      </div>
  );
}

const mapStateToProps = state => {
  console.log('>>> map state to props', state);
  return { count: state.counterReducer.count };
};

export default connect(mapStateToProps)(Counter);

... поэтому всякий раз, когда Counter импортируется в другое место проекта (import Counter from '<path>/Counter'), мы уверены, что Counter уже является подключенным компонентом.