import store from '../../redux/store'
import { creatAdd, creatJian } from '../../redux/count_action'
export default class Count extends Component {
  ///相加
  addCount = () => {
    const { value } = this.selectValue///獲取當(dāng)前選擇的值
    store.dispatch(creatAdd(value * 1))
  }
  //相減
  lessCount = () => {
    const { value } = this.selectValue
    store.dispatch(creatJian(value * 1))
  }
  render () {
    return (
      <div>
        <h2>當(dāng)前計算器的值為：{store.getState()}</h2>
        <select ref={c => this.selectValue = c}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
        <button onClick={this.addCount}>相加</button>&nbsp;
        <button onClick={this.lessCount}>相減</button>&nbsp;
      </div>
    )
  }
}

import { ADDCOUNT, CREATJIAN } from '../redux/constant'
export const creatAdd = data => ({ type: ADDCOUNT, data })
export const creatJian = data => ({ type: CREATJIAN, data })

import { legacy_createStore } from 'redux'
import countReducer from './count_reducer'
///將reducer和store聯(lián)系起來
export default legacy_createStore(countReducer)

import { ADDCOUNT, CREATJIAN } from './constant'
const inin = 0
export default function countReducer (pre = inin, action) {
  ///從action解析出type和data
  const { type, data } = action
  ///通過類型進(jìn)行匹配，判斷怎么做
  switch (type) {
    case ADDCOUNT:
      return pre + data
    case CREATJIAN:
      return pre - data
    default:
      return pre
  }
}

為防止出現(xiàn)拼寫錯誤
export const ADDCOUNT = 'addCount'
export const CREATJIAN = 'lessCount'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <App />
);
///在入口文件進(jìn)行更新渲染
store.subscribe(() => {
  root.render(
    <App />
  )
})