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组件, 有两个数据集, propsstate
  • 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管理?把重点问题考虑清楚, 问题也就解决了大半!

为便于管理, 相关资源整合到一张独立的帖子,链接如下: http://www.jianshu.com/p/4f28e1ae08b1

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏码云1024

Jupyter Notebook

4038
来自专栏极客编程

Cheerio,服务端的JQuery。

cheerio 是nodejs特别为服务端定制的,能够快速灵活的对JQuery核心进行实现。它工作于DOM模型上,且解析、操作、呈送都很高效。

1091
来自专栏HTML5学堂

2016.05 第二周 群问题分享

HTML+CSS 如何实现360浏览器默认为极速模式打开网页 2016.05.09~2016.05.13 核心概念 meta参数设置 参考答案 <meta na...

36011
来自专栏君赏技术博客

Jekyll-Admin-Mac-模板处理

制作导航条 使用网络框架Alamofire 使用 SwiftyJSON iOS10开启启用 HTTP 请求 使用 ObjectMapper ...

1133
来自专栏前端新视界

Vue.js 系列教程 1:渲染,指令,事件

原文:intro-to-vue-1-rendering-directives-events 译者:nzbin 如果要我用一句话描述使用 Vue 的经历,我可...

2399
来自专栏一个会写诗的程序员的博客

JS如何模拟鼠标点击X,Y坐标

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createEvent

1.9K5
来自专栏進无尽的文章

Java工具篇| Eclipse 常用快捷键

古人云:工欲善其事,必先利其器。快键键作为开发中及其常用的节省开发时间提升效率的方式之一,其重要性不言而喻,也许你可以不使用它,但是当你熟练使用、巧妙使用这些快...

1142
来自专栏nice_每一天

一天带你入门到放弃vue.js(二)

至此在vue中提供了计算属性,computed,在main.js指定computed对象中指定计算

1151
来自专栏小狼的世界

Vimperator:玩酷你的Firefox

First there was a Navigator, then there was an Explorer. Later it was time for a...

1264
来自专栏熊二哥

Javascript快速入门(下篇)

Javascript, cheer up。 ? ? Ajax:其通过在Web页面与服务器之间建立一个额外的处理层,这个处理层就被称为Ajax引擎,它解释来自用...

2047

扫码关注云+社区

领取腾讯云代金券