使用Redux怎么實(shí)現(xiàn)一個(gè)組合計(jì)數(shù)器

這篇文章給大家介紹使用Redux怎么實(shí)現(xiàn)一個(gè)組合計(jì)數(shù)器，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

專注于為中小企業(yè)提供網(wǎng)站建設(shè)、成都網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)綠園免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千多家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

Redux是一種解決數(shù)據(jù)共享的方案

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


// data
let allNum = {num :1000}

// 創(chuàng)建reducer, 名字的默認(rèn)值為
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
  }
}

// 創(chuàng)建store存儲(chǔ)數(shù)據(jù)(傳入處理函數(shù)reducer, 核心數(shù)據(jù)allNum)
let store = createStore(reducer, allNum)
console.log("初始化的數(shù)據(jù)為",store.getState('num'))

// 添加監(jiān)聽(tīng)函數(shù)
store.subscribe(() => {console.log("監(jiān)聽(tīng)函數(shù)發(fā)出:", store.getState())});

// 發(fā)出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組件, 有兩個(gè)數(shù)據(jù)集, props和state

props表示外部傳入組件的參數(shù)(數(shù)據(jù)由外部傳入, 可以被外部更改)

state表示組件固有的屬性(數(shù)據(jù)私有, 不可以被外部更改)

我們可以把多個(gè)React組件的props交由Redux進(jìn)行管理, 這樣就實(shí)現(xiàn)了React組件之間數(shù)據(jù)的共享

使用Redux怎么實(shí)現(xiàn)一個(gè)組合計(jì)數(shù)器

組件如何讀寫(xiě)數(shù)據(jù)

組件通過(guò)action發(fā)送信號(hào), reducer處理action, story內(nèi)的值被reducer修改, 由于React組件已經(jīng)被綁定到story中, 所以story內(nèi)的數(shù)據(jù)被修改后, 可以直接同步到React的組件中

使用Redux怎么實(shí)現(xiàn)一個(gè)組合計(jì)數(shù)器

小案例: 實(shí)現(xiàn)一個(gè)組合計(jì)數(shù)器

單個(gè)計(jì)數(shù)器的數(shù)據(jù)由組件自身state管理

三個(gè)計(jì)數(shù)器的數(shù)據(jù)只和由Redux管理

使用Redux怎么實(shí)現(xiàn)一個(gè)組合計(jì)數(shù)器

動(dòng)圖演示

實(shí)現(xiàn)的源碼如下

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 ( 
      計(jì)數(shù)器 
      
      
      
       組件值的和為: { 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>

) } } // 創(chuàng)建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 }) // 創(chuàng)建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);
    }
  }
}

關(guān)于使用Redux怎么實(shí)現(xiàn)一個(gè)組合計(jì)數(shù)器就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

網(wǎng)頁(yè)標(biāo)題：使用Redux怎么實(shí)現(xiàn)一個(gè)組合計(jì)數(shù)器
轉(zhuǎn)載源于：http://weahome.cn/article/ipjjch.html

真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

使用Redux怎么實(shí)現(xiàn)一個(gè)組合計(jì)數(shù)器

其他資訊

網(wǎng)站制作

企業(yè)服務(wù)

網(wǎng)站建設(shè)

服務(wù)器托管