Component not rerender after action being dispatched and reduced - reactjs

Question

i want to make a counter Component when i learning in react and redux now.
so i want to change the eval input and then i will click the resolve input,and the end show the resolve to component2.but when i clicked,the resolve was changed in reducer and actions (i was consoled the resolve) , but had not change in component2,why?my English is not good,thanks...
this is my full code:
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
my component1: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>
)
}
}
my component2: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>
}
}
and image:

Answer 1

You should be using react-redux.
The problem is your Container component is not being notified when the store's state changes. You can do this manually by hooking into lifecycle methods and setting state, but this is what react-redux already does (in a more optimized way).