欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-16 22:58:06
redux是一种解决数据共享的方案 import {createstore} from 'redux'; import react from 'react'...

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

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组件之间数据的共享

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

组件如何读写数据

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

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

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

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

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

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管理?把重点问题考虑清楚, 问题也就解决了大半!

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