Redux實現組合計數器

Redux是一種解決資料共享的方案

import {createStore} from 'redux';import React from 'react';import ReactDOM from 'react-dom';import {connect, createProvider} from 'react-redux'// datalet 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())});// 發出actionlet 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元件之間資料的共享

元件如何讀寫資料

元件透過action傳送訊號, reducer處理action, story內的值被reducer修改, 由於React元件已經被繫結到story中, 所以story內的資料被修改後, 可以直接同步到React的元件中

小案例: 實現一個組合計數器

• 單個計數器的資料由元件自身state管理

• 三個計數器的資料只和由Redux管理

動圖演示

• 實現的原始碼如下

index.html

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 ( 

            
計數器
 
            
            
            
            
 元件值的和為: { 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 } 

            
            
 )
    }
}// 建立reducerfunction 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  ({

})const ManageCounterMapStateToProps = (state) => ({
    sum: state.sum
})const mapDispatchToProps = (dispatch) => ({
    dispatch: dispatch
})// 建立storelet 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的設計思想是很簡單的, 也有了很成熟的庫函式供我們呼叫, 所以面對一個問題時, 我們考慮的重點是: React元件內哪些資料需要被Redux管理?把重點問題考慮清楚, 問題也就解決了大半!

為便於管理, 相關資源整合到一張獨立的帖子，連結如下:

作者：木子昭
連結：