分派和减少操作后组件不重新呈现

Question

我现在在学习 react 和 redux 时想制作一个计数器组件。 所以我想更改 eval 输入，然后我将单击解析输入，最后显示对 component2 的解析。但是当我单击时，reducer 和操作中的解析已更改（我被安慰解析），但没有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

您应该使用react-redux。

问题是您的Container 组件在商店状态更改时没有收到通知。您可以通过挂钩生命周期方法和设置状态来手动执行此操作，但 react-redux 已经这样做了（以更优化的方式）。