189 8069 5689

使用Redux怎么实现一个组合计数器-创新互联

这篇文章给大家介绍使用Redux怎么实现一个组合计数器，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

为察雅等地区用户提供了全套网页设计制作服务，及察雅网站建设行业解决方案。主营业务为成都网站设计、做网站、察雅网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

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 
Hello World
;}
}

ReactDOM.render(, 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




  
  react-webpack-demo


  

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 ( 

      计数器
 
      
      
      
       组件值的和为: { this.props.sum } 
 
      
 )
  }
}


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 ( 
       
       { value } < /span>

      
      
 )   } } // 创建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(          ,   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怎么实现一个组合计数器就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。


本文题目：使用Redux怎么实现一个组合计数器-创新互联
文章路径：http://cdxtjz.com/article/piehi.html

其他资讯