react中求和案例_redux完整版

最新推荐文章于 2024-10-26 16:53:59 发布

肖肖冲鸭

最新推荐文章于 2024-10-26 16:53:59 发布

阅读量447

点赞数

CC 4.0 BY-SA版权

分类专栏： react 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_48952990/article/details/126709965

react 专栏收录该内容

25 篇文章

订阅专栏

本文档介绍了如何在React应用中使用Redux实现一个简单的计数器功能。通过新增多个文件，包括`count_action.js`来创建action对象，`constant.js`定义常量避免编码错误，`count_reducer.js`编写reducer，`store.js`配置Redux store，以及在`Components/Count/index.jsx`组件中调用这些功能。在`index.js`中整合整个应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

新增文件：

count_action.js 专门用于创建action对象
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 />)
})