Компонент не отображается полностью и не изменяется при изменении состояния

Question

Я пытаюсь реализовать базовое приложение c React-Redux Counter, но по какой-то причине оно не рендерится полностью, нормальная часть html работает, но this.store.getState () в функции рендеринга получает значение и не обрабатывается. Я попытался найти отладку первым, что обнаружил, когда пытался console.log (this.store.getState ()), он возвратил undefined и второе, что я обнаружил, я не использовал store.subscribe для повторного рендеринга страницы при каждом изменении состояния, и я уверен, что проблема как-то связана с этим, но как включить store.subscribe когда мы используем класс для рендеринга представления?

Это код App. js, который содержит класс Counter

import React from 'react';
import {createStore} from 'redux'

class Counter extends React.Component{
  constructor(props){
    super(props);
    this.store=createStore(this.counterReducer);
    // this.store.subscribe(render);
  }
  counterReducer = (state=0,action) =>{
      switch(action.type){
        case 'INCREMENT':
          return state+1;
        case 'DECREMENT':
          return state-1;
      }
  }

  counter = (props) =>{
    return(
      <div>
        <h1>Value : {props.value}</h1>
        <button onClick={props.OnIncrement}>+</button>
        <button onClick={props.OnDecrement}>-</button>
      </div>
    )
  }

  render(){
    console.log(this.store.getState())
    return (
      <div>
        <h1>Counter</h1>
        <this.counter value={this.store.getState()} OnIncrement={() => {
          this.store.dispatch({
            type:'INCREMENT'
          })
        }} OnDecrement={() => {
          this.store.dispatch({
            type:'DECREMENT'
          })
        }
        }/>
      </div>
    );
  }

}

export default Counter;

Это код индекса. js

import React from 'react';
import ReactDOM from 'react-dom';
import Counter from './App';

ReactDOM.render(<Counter />, document.getElementById('root'));

Answer 1

Вот решение, использующее useReducer для реакции напрямую.

import React, {useReducer} from 'react';

const counterReducer = (state,action) =>{
    switch(action.type){
      case 'INCREMENT':
        return state+1;
      case 'DECREMENT':
        return state-1;
    }
    return state;
}
const CounterButton = (props) =>{
    return(
      <div>
        <h1>Value : {props.value}</h1>
        <button onClick={props.OnIncrement}>+</button>
        <button onClick={props.OnDecrement}>-</button>
      </div>
    )
  }
const Counter = () =>{
  const [state, dispatch] = useReducer(counterReducer, 0);

    return (
      <div>
        <h1>Counter</h1>
        <CounterButton value={state} OnIncrement={() => {
          dispatch({
            type:'INCREMENT'
          })
        }} OnDecrement={() => {
          dispatch({
            type:'DECREMENT'
          })
        }
        }/>
      </div>
    );

}

export default Counter;