新增文件：

1. count_action.js 专门用于创建action对象
2. constant.js放置由于编码疏忽写错action中的type

src---->redux—constant.js

/* 
    该模块是用于定义action对象中type类型的常量值,目的只有一个，便于管理的同时，防止出现拼写错误的情况
*/
export const INCREMENT='increment'
export const DECREMENT='decrement'

src---->redux—count_action.js

/* 
    该文件专门为Count组件生成action对象
*/
import {
    
    INCREMENT,DECREMENT} from './constant'
export const  createIncreamentAction = data => ({
    
     type:INCREMENT,data })
export const  createDecreamentAction = data => ({
    
     type:DECREMENT,data })

src—>redux—count_reducer.js

/* 
    该文件是用于创建一个为Count服务的reducer，reducer的本质就是一个函数
    reducer函数会接到两个参数，分别会：之前的状态(preState) ,动作对象(action)
*/
import {
    
    INCREMENT,DECREMENT} from './constant'
const initState=0 //初始化状态
export default function countReducer(preState=initState,action){
    
    
    // 从action对象中获取：type，data
    const {
    
    type,data}=action
    // 根据type决定如何加工数据
    switch (type) {
    
    
        case INCREMENT://如果是加
            return preState+data
        case DECREMENT://如果是减
            return preState-data
        default:
            return preState
    }
}

src---->redux—store.js

/* 
    该文件专门用于暴露一个store对象，整个应用只有一个store对象
*/
// 引入createStore,专门用于创建redux最为核心的store对象
import {
    
    legacy_createStore as createStore} from 'redux'
// 引入为count服务的reducer
import countReducer  from './count_reducer'
// 暴露store
export default createStore(countReducer)

src---->Components—Count—index.jsx

import React, {
    
     Component } from 'react'
// 引入store，用于获取redux中保存的状态
import store from '../../redux/store'
// 引入actionCreate,专门用于action对象
import {
    
    createDecreamentAction, createIncreamentAction} from '../../redux/count_action'

export default class Count extends Component {
    
    

    state={
    
    carName:'奔驰c63'}

    /* componentDidMount(){
        // 监测redux中状态的变化，只要变化，就调用render
        store.subscribe(()=>{
            this.setState({})
        })
    } */

    // 加法
    increment=()=>{
    
    
        const {
    
    value}=this.selectNumber
        // 通知redux加value
        store.dispatch(createIncreamentAction(value*1))
    }

    // 减法
    decrement=()=>{
    
    
        const {
    
    value}=this.selectNumber
        store.dispatch(createDecreamentAction(value*1))
    }

    render() {
    
    
        return (
            <div>
                <h1>当前求和为：{
    
    store.getState()}</h1>
                <select ref={
    
    c=>this.selectNumber=c} >
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>&nbsp;&nbsp;
                <button onClick={
    
    this.increment}>+</button>&nbsp;&nbsp;
                <button onClick={
    
    this.decrement}>-</button>&nbsp;&nbsp;
            </div>
        )
    }

}

src—>index.js

import React from "react";
import {
    
     createRoot } from 'react-dom/client';    //react18的引入方式
import App from './App'
import store from './redux/store'

const root=createRoot(document.getElementById('root'))
root.render( < App />)   //react18的渲染方式

// 监测redux中状态的变化，只要变化，就调用render
store.subscribe(()=>{
    
    
    root.render( < App />)
})