javascript - 组件未完全渲染且不随 State 的变化而变化

Question

我正在尝试实现一个基本的 React-Redux 计数器应用程序，但由于某种原因它没有完全渲染，正常的 html 部分正在工作，但渲染中的 this.store.getState()函数正在获取值但没有被渲染。我试图找到调试它，我发现的第一件事是当我尝试 console.log(this.store.getState()) 它返回 undefined ，第二我发现我没有使用 store.subscribe 在每次状态更改时重新渲染页面，我确信问题与此有关，但如何包含 store .subscribe 当我们使用类来渲染 View 时？

这是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;

这是index.js的代码

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

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

Answer 1

这是直接使用react中的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;