redux使用,相当于vue中的vuex

实现上述功能:

下载redux, npm install redux

新建一个redux文件夹,里面新建一个count_reduce.js和store.js文件

count_reduce.js

复制代码
export default function count(pre=0,action){
    let {type,data} =action
    console.log(action,'action')

    switch(type){
        case 'increment':
        return pre+data;
        case 'decrement':
            return pre-data;
        default :
        return pre
    }
}

store.js

复制代码
// 该文件专门用于暴露一个store对象,整个应用只有一个store对象

//引入redux
import { legacy_createStore as createStore } from "redux";
import reducer from './count_reducer'
const store =createStore(reducer)
export default store

页面使用

复制代码
import React, { Component } from 'react'
import store from '../../redux/store';
export default class index extends Component {
    //这块主要因为redux不会渲染render,所以在这里监听store值的改变
    componentDidMount(){
        store.subscribe(()=>{
            this.setState({})
        })
    }
    // 相加
    increment=()=>{
        let {value} =this.selectVal;
        store.dispatch({type:'increment',data:value*1})
    }
    // 相减
    decrement=()=>{
        let {value} =this.selectVal;
        store.dispatch({type:'decrement',data:value*1})
    }
    // 为奇数加加
    incrementOdd=()=>{
        let {value} =this.selectVal;
        let count =store.getState();
        if(count % 2!==0){
        store.dispatch({type:'increment',data:value*1})
        }
    }
    // 等一会加加
    incrementWait=()=>{
        let {value} =this.selectVal;
        setTimeout(() => {
            store.dispatch({type:'increment',data:value*1})
        }, 500);
    }
  render() {
    return (
      <div>
        <h2>和为:{store.getState()}</h2>
        <select ref={e=>this.selectVal=e}>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>&nbsp;
        <button onClick={this.increment}>+</button>&nbsp;
        <button onClick={this.decrement}>-</button>&nbsp;
        <button onClick={this.incrementOdd}>和为奇数时再加</button>&nbsp;
        <button onClick={this.incrementWait}>等一等再加</button>&nbsp;
      </div>
    )
  }
}
相关推荐
美酒没故事°11 分钟前
npm源管理器:nrm
前端·npm·npm源
用户221520442780012 分钟前
vue3组件间的通讯方式
前端·vue.js
三十_A29 分钟前
【实录】使用 patch-package 修复第三方 npm 包中的 Bug
前端·npm·bug
下位子37 分钟前
『AI 编程』用 Claude Code 从零到一开发全栈减脂追踪应用
前端·ai编程·claude
tyro曹仓舒37 分钟前
Vue单文件组件到底需不需要写name
前端·vue.js
用户479492835691538 分钟前
面试官:讲讲2FA 双因素认证原理
前端·后端·安全
乐影39 分钟前
TS 模板字符串类型:从基础到进阶的类型编程魔法
前端·typescript
龙在天40 分钟前
CSS 属性值的计算与过程
前端
云鹤_41 分钟前
【Amis源码阅读】组件注册方法远比预想的多!
前端·低代码
xinfei43 分钟前
ES6 新特性 从 ECMAScript 2015(ES6)到 ECMAScript 2025
前端