Redux实现组合计数器的示例代码

2024-09-27 13:34:58

Redux是一种解决数据共享的方案

import {createStore} from 'redux';
import React from 'react';
import ReactDOM from 'react-dom';
import {connect, createProvider} from 'react-redux'

// data
let allNum = {num :1000}

// 创建reducer, 名字的默认值为
function reducer(state, action) {
  let tmp = {}
  if (action.type == "decrease"){
    allNum.num = allNum.num - action.value;
    tmp = Object.assign({}, state, {num: allNum.num})
    return tmp
  }else if(action.type == "increase"){
    allNum.num = allNum.num + action.value;
    tmp = Object.assign({}, state, {num: allNum.num})
    return tmp
  }else{
    return state
  }
}

// 创建store存储数据(传入处理函数reducer, 核心数据allNum)
let store = createStore(reducer, allNum)
console.log("初始化的数据为",store.getState('num'))

// 添加监听函数
store.subscribe(() => {console.log("监听函数发出:", store.getState())});

// 发出action
let tmp = {};
tmp = store.dispatch({type: "decrease", value: 10})
console.log("---->", tmp);
tmp = store.dispatch({type: "decrease", value: 100})
console.log("---->", tmp);
tmp = store.dispatch({type: "increase", value: 31})
console.log("---->", tmp);
tmp = store.dispatch({type: "increase", value: 123})
console.log("---->", tmp);

class MyComponent extends React.Component {
 render() {return <div>Hello World</div>;}
}

ReactDOM.render(<MyComponent />, document.getElementById("root"));

React和Redux组合使用

React组件, 有两个数据集, props和state

props表示外部传入组件的参数(数据由外部传入, 可以被外部更改)

state表示组件固有的属性(数据私有, 不可以被外部更改)

我们可以把多个React组件的props交由Redux进行管理, 这样就实现了React组件之间数据的共享

组件如何读写数据

组件通过action发送信号, reducer处理action, story内的值被reducer修改, 由于React组件已经被绑定到story中, 所以story内的数据被修改后, 可以直接同步到React的组件中

小案例: 实现一个组合计数器

单个计数器的数据由组件自身state管理

三个计数器的数据只和由Redux管理

动图演示

实现的源码如下

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>react-webpack-demo</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

index.js

import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.scss';
import Redux from 'redux';
import { connect, Provider } from 'react-redux';
import { createStore } from 'redux';
import { PropTypes } from 'prop-types';

class ManageCounter extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return ( <div>
      <p className="title">计数器</p>
      <Counter id = "0" />
      <Counter id = "1" />
      <Counter id = "2" />
      <p className="result"> 组件值的和为: { this.props.sum } </p>
      </div> )
  }
}

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.changeSum = this.changeSum.bind(this)
    this.decrease = this.decrease.bind(this)
    this.increase = this.increase.bind(this)
    this.state = { value: 0 };
  }
  changeSum() {
    this.props.dispatch({ type: 'changeSum', payload: { id: this.props.id, value: this.state.value } })
  }
  decrease() {
    let self = this;
    this.setState({ value: this.state.value - 1 }, () => {
      self.changeSum()

    })
  }

  increase() {
    let self = this;
    self.setState({ value: this.state.value + 1 }, () => {
      self.changeSum()
    })
  }

  render() {
    const { value } = this.state;
    let { id } = this.props;
    return ( <div >
      <input type = "button"value = "减1" onClick = { this.decrease }/>
      <span > { value } < /span><br/ >
      <input type = "button" value = "加1" onClick = { this.increase }/>
      </div> )
  }
}

// 创建reducer
function reducer(state = { number: [0, 0, 0], sum: 0 }, action = {}) {
  if (action.type == 'changeSum') {
    let { id, value } = action.payload
    console.log("id:", id, "value:", value);
    state.number[id] = value
    let tmpSum = 0;
    for (let i = 0; i < state.number.length; i++) {
      tmpSum += state.number[i]
    }
    return Object.assign({}, state, { sum: tmpSum });
  } else {
    return state;
  }
}

const CounterMapStateToProps = (state) => ({

})

const ManageCounterMapStateToProps = (state) => ({
  sum: state.sum
})

const mapDispatchToProps = (dispatch) => ({
  dispatch: dispatch
})

// 创建store
let store = createStore(reducer)
// connect连接
Counter = connect(CounterMapStateToProps, mapDispatchToProps)(Counter)
ManageCounter = connect(ManageCounterMapStateToProps, mapDispatchToProps)(ManageCounter)

ReactDOM.render(
  <Provider store = { store }>
  <ManageCounter />
  </Provider> ,
  document.getElementById('root'));

index.scss

$designWidth: 750;
@function px2rem($px) {
  @return $px*10/$designWidth+rem;
}

#root {
  div {
    p {
      font-size: px2rem(300);
      color: #5EA1F3;
      text-align: center;
    }
    div {
      font-size: px2rem(500);
      display: flex;
      color: #64B587;
      border: 1px solid #F0BB40;
      input {
        flex: 1 1 auto;
        background-color: #64B587;
        font-size: px2rem(200);
        outline: none;
        color:#ffffff;
      }
      span {
        width: 300px;
        flex: 1 1 auto;
        text-align: center;
      }
    }
    .title {
      color: #BDBDBD;
    }
    .result {

      font-size: px2rem(200);
    }
  }
}

小结

redux的设计思想是很简单的, 也有了很成熟的库函数供我们调用, 所以面对一个问题时, 我们考虑的重点是: React组件内哪些数据需要被Redux管理?把重点问题考虑清楚, 问题也就解决了大半!

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

JavaScript实现计数器基础方法

本文实例为大家分享了js实现计数器的具体代码,供大家参考,具体内容如下通过使用 JavaScript,设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行.称之为计时事件. 在 JavaScritp 中使用计时事件是很容易的,两个关键方法是: setInterval() - 间隔指定的毫秒数不停地执行指定的代码. setTimeout() - 暂停指定的毫秒数后执行指定的代码 Note: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两
C++ 中约瑟夫环替换计数器m(数组解决)

C++ 中约瑟夫环替换计数器m(数组解决) 题目描述: 输入一个由随机数组成的数列(数列中每个数均是大于0的整数,长度已知),和初始计数值m.从数列首位置开始计数,计数到m后,将数列该位置数值替换计数值m,并将数列该位置数值出列,然后从下一位置从新开始计数,直到数列所有数值出列为止.如果计数到达数列尾段,则返回数列首位置继续计数.请编程实现上述计数过程,同时输出数值出列的顺序比如: 输入的随机数列为:3,1,2,4,初始计数值m=7,从数列首位置开始计数(数值3所在位置) 第一轮计数出列数字为
Servlet实现点击计数器的方法

一.Web页面的点击计数器很多时候,可能有兴趣知道网站的某个特定页面上的总点击量.使用Servlet来计算这些点击量是非常简单的,因为一个Servlet的生命周期是由它运行的容器控制的. 以下是基于Servlet生命周期实现一个简单的页面点击计数器需要的步骤: 在init()方法中初始化一个全局变量. 每次调用doGet()或doPost()方法时,增加全局变量. 如果需要,可以使用一个数据库表来存储destroy()方法中的全局变量.在下次初始化Servlet时,这个值可以在init()方法
PHP用函数嵌入网站访问量计数器

这是一种方法实现计数器.想看另一种方法的请点击:[PHP]简单的网站访问量计数器实现想看具体代码思路的也请点击上面的链接. 创建Embed-Count文件夹在Embed-Count文件夹下面创建counter.inc.php文件,内容如下: <?php function counter(){ $counter = 0; //初始化变量 $max_len = 8; $lj = explode("/",$_SERVER["PHP_SELF"]); //超全局变
Vuex实现计数器以及列表展示效果

本篇教程将以计数器及列表展示两个例子来讲解Vuex的简单用法. 本案例github 从安装到启动初始页面的过程都直接跳过.注意安装时选择需要路由. 首先,src目录下新建store目录及相应文件,结构如下: index.js文件内容: import Vue from "vue" import Vuex from 'vuex' Vue.use(Vuex); //务必在new Vuex.Store之前use一下 export default new Vuex.Store({ state:{
PHP基于redis计数器类定义与用法示例

本文实例讲述了PHP基于redis计数器类定义与用法.分享给大家供大家参考,具体如下: Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API. 这里使用其incr(自增),get(获取),delete(清除)方法来实现计数器类. 1.Redis计数器类代码及演示实例 RedisCounter.class.php <?php /** * PHP基于Redis计数器类 * Date: 2017-10-28 * Aut
Spring之借助Redis设计一个简单访问计数器的示例

为什么要做一个访问计数?之前的个人博客用得是卜算子做站点访问计数,用起来挺好,但出现较多次的响应很慢,再其次就是个人博客实在是访问太少,数据不好看
PHP实现网站访问量计数器

简单的网站访问量计数器实现,具体如下首先说明思路: 1.用户向服务器发出访问请求 2.服务器读取访问次数文件,+1,向客户端返回 3.服务器保存新的浏览次数 4.新用户访问,重复123即可解决方案(主要算法): 1.数据文件:counter.dat 2.读出数据文件打开文件: 如果不存在,创建,并以0为初识数据: 否则,读出数据: 关闭文件. 3.把累加后的数据写入文件counter.dat 累加数据: 打开文件: 写入数据:
redis实现计数器-防止刷单方法介绍

最近由于双11要来临,公司需要在接口请求上,做一下并发限制的处理,或者做一个防止刷单的安全拦截: 比如:一个接口请求,限制每秒请求总数为200次,超过200次就等待,等下一秒,再次请求,这里用到一个redis作为一个计数器的模式来实现. 调用redis的方法: INCR key 将 key 中储存的数字值增一. 如果 key 不存在,那么 key 的值会先被初始化为 0 ,然后再执行 INCR 操作. 如果值包含错误的类型,或字符串类型的值不能表示为数字,那么返回一个错误. 这是一个针对字符串的
java 使用ConcurrentHashMap和计数器实现锁

java 使用ConcurrentHashMap和计数器实现锁在某些场景下,我们想让线程根据某些业务数据进行排队,简单代码如下: import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import java.util.concurrent.ConcurrentHashMap; import java.util.concurrent.atomic.Ato

Redux实现组合计数器的示例代码

相关推荐

随机推荐