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>
    )
  }
}
相关推荐
Bellafu6662 小时前
selenium 常用xpath写法
前端·selenium·测试工具
blackorbird5 小时前
Edge 浏览器 IE 模式成攻击突破口:黑客借仿冒网站诱导攻击
前端·edge
谷歌开发者6 小时前
Web 开发指向标 | Chrome 开发者工具学习资源 (一)
前端·chrome·学习
名字越长技术越强6 小时前
Chrome和IE获取本机ip地址
前端
天***88966 小时前
Chrome 安装失败且提示“无可用的更新” 或 “与服务器的连接意外终止”,Chrome 离线版下载安装教程
前端·chrome
半梦半醒*6 小时前
zabbix安装
linux·运维·前端·网络·zabbix
大怪v6 小时前
【搞发🌸活】不信书上那套理论!亲测Javascript能卡浏览器Reader一辈子~
javascript·html·浏览器
清羽_ls6 小时前
React Hooks 核心规则&自定义 Hooks
前端·react.js·hooks
你的人类朋友7 小时前
“签名”这个概念是非对称加密独有的吗?
前端·后端·安全
西陵7 小时前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构