Компонент не перерисовывается после отправки и уменьшения действия

Question

Я хочу создать счетчик компонентов, когда я учусь на реаги и редукции сейчас.поэтому я хочу изменить ввод eval, а затем я нажму на вход разрешения, и в конце отобразится разрешение для component2.but, когда я щелкнул, разрешение было изменено в редукторе и действиях (я был утешен разрешением), но неизменение в component2, почему? мой английский не очень хорош, спасибо ...

это мой полный код:

actions.js

export function DO_COUNT(resolve) {
  return {
    type: 'DO_COUNT',
    payload: resolve
  }
}

reducer.js

import actions from '../actions'    
export default (state = { resolve: 0 }, actions) => {
      switch (actions.type) {
        case 'DO_COUNT':
          console.log({
            ...state,
            resolve: actions.payload
          })
          return {
            ...state,
            resolve: actions.payload
          }
          break
        default:
          return state
      }
    }

store.js

import { createStore } from 'redux'
import reducers from '../reducers'
import { composeWithDevTools } from 'redux-devtools-extension'

const store = createStore(reducers, composeWithDevTools())

export default store

мой компонент1: Counter.js

import React, { Component } from 'react'
import styleObj from './style.less'
import store from '../../store'
import { DO_COUNT, CHANGE_EVAL } from '../../actions'

export default class Counter extends Component {
  constructor(props) {
    super(props)
    this.state = {
      num1: 0,
      num2: 0,
      myEval: '+'
    }
  }

  changeEval = e => {
    this.setState({
      myEval: e.target.value
    })
  }

  changeNum1 = e => {
    // let _target = e.target.dataset.target
    let value = e.target.value
    this.setState(
      {
        num1: value
      },
      () => {
        console.log(this.state)
      }
    )
  }
  changeNum2 = e => {
    // let _target = e.target.dataset.target
    let value = e.target.value
    this.setState(
      {
        num2: value
      },
      () => {
        console.log(this.state)
      }
    )
  }

  doCount = () => {
    let resolve = eval(
      [this.state.num1, this.state.num2].join(this.state.myEval)
    )
    store.dispatch(DO_COUNT(resolve))
  }

  render() {
    return (
      <div className={styleObj.counterBox}>
        <input type="number" onInput={this.changeNum1} data-target="num1" />
        <select onChange={this.changeEval}>
          <option defaultValue="+">+</option>
          <option value="-">-</option>
          <option value="*">*</option>
          <option value="/">/</option>
        </select>
        <input type="number" onInput={this.changeNum2} data-target="num2" />
        <input type="button" value="=" onClick={this.doCount} />
      </div>
    )
  }
}

мой компонент2: Container.js

import React, { Component } from 'react'
import styleObj from './style.less'
import store from '../../store'

export default class Container extends Component {
  constructor(props) {
    super(props)
  }
  render() {
    return <h1 className={styleObj.content}>{store.getState().resolve}</h1>
  }
}

и изображение:

Answer 1

Вы должны использовать response-redux .

Проблема в том, что ваш компонент Container не уведомляется при изменении состояния магазина.Вы можете сделать это вручную, подключившись к методам жизненного цикла и установив состояние, но это то, что react-redux уже делает (более оптимизированным способом).