React中redux的使用

image.png

組件目錄結(jié)果

image.png

components: Count/ index.jsx

import React, { Component } from 'react'
//引入action
import {
    increment,
    decrement,
    incrementAsync
} from '../../redux/actions/count'
//引入connect用于連接UI組件與redux
import {connect} from 'react-redux'

//定義UI組件
class Count extends Component {

    state = {carName:'奔馳c63'}

    //加法
    increment = ()=>{
        const {value} = this.selectNumber
        this.props.increment(value*1)
    }
    //減法
    decrement = ()=>{
        const {value} = this.selectNumber
        this.props.decrement(value*1)
    }
    //奇數(shù)再加
    incrementIfOdd = ()=>{
        const {value} = this.selectNumber
        if(this.props.count % 2 !== 0){
            this.props.increment(value*1)
        }
    }
    //異步加
    incrementAsync = ()=>{
        const {value} = this.selectNumber
        this.props.incrementAsync(value*1,500)
    }

    render() {
        //console.log('UI組件接收到的props是',this.props);
        return (
            <div>
                <h2>我是Count組件,下方組件總?cè)藬?shù)為:{this.props.renshu}</h2>
                <h4>當(dāng)前求和為:{this.props.count}</h4>
                <select ref={c => this.selectNumber = c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>&nbsp;
                <button onClick={this.increment}>+</button>&nbsp;
                <button onClick={this.decrement}>-</button>&nbsp;
                <button onClick={this.incrementIfOdd}>當(dāng)前求和為奇數(shù)再加</button>&nbsp;
                <button onClick={this.incrementAsync}>異步加</button>&nbsp;
            </div>
        )
    }
}

//使用connect()()創(chuàng)建并暴露一個Count的容器組件
export default connect(
    state => ({
        count:state.count,
        personCount:state.persons.length
    }),
    {increment,decrement,incrementAsync}
)(Count)



components: Person/ index.jsx

import React, { Component } from 'react'
import {nanoid} from 'nanoid'
import {connect} from 'react-redux'
import {addPerson} from '../../redux/actions/person'

class Person extends Component {

    addPerson = ()=>{
        const name = this.nameNode.value
        const age = this.ageNode.value*1
        const personObj = {id:nanoid(),name,age}
        this.props.addPerson(personObj)
        this.nameNode.value = ''
        this.ageNode.value = ''
    }

    render() {
        return (
            <div>
                <h2>我是Person組件,上方組件求和為{this.props.count}</h2>
                <input ref={c=>this.nameNode = c} type="text" placeholder="輸入名字"/>
                <input ref={c=>this.ageNode = c} type="text" placeholder="輸入年齡"/>
                <button onClick={this.addPerson}>添加</button>
                <ul>
                    {
                        this.props.persons.map((p)=>{
                            return <li key={p.id}>{p.name}--{p.age}</li>
                        })
                    }
                </ul>
            </div>
        )
    }
}

export default connect(
    state => ({
        persons:state.persons,
        count:state.count
    }),//映射狀態(tài)
    {addPerson}//映射操作狀態(tài)的方法
)(Person)

redux : action reducers constant.js store.js
action/ count.js

image.png

action/ person.js
image.png

reducers/ count.js
image.png

reducers/ person.js
image.png

reducers/ index.js
image.png

redux/ constant.js
image.png

redux/ store.js
image.png

app.jsx
image.png

index.js
image.png

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市宙项,隨后出現(xiàn)的幾起案子赚窃,更是在濱河造成了極大的恐慌打瘪,老刑警劉巖躁愿,帶你破解...
    沈念sama閱讀 218,036評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異装黑,居然都是意外死亡限番,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,046評論 3 395
  • 文/潘曉璐 我一進(jìn)店門想幻,熙熙樓的掌柜王于貴愁眉苦臉地迎上來粱栖,“玉大人,你說我怎么就攤上這事脏毯∧志浚” “怎么了?”我有些...
    開封第一講書人閱讀 164,411評論 0 354
  • 文/不壞的土叔 我叫張陵食店,是天一觀的道長渣淤。 經(jīng)常有香客問我,道長叛买,這世上最難降的妖魔是什么砂代? 我笑而不...
    開封第一講書人閱讀 58,622評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮率挣,結(jié)果婚禮上刻伊,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好捶箱,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,661評論 6 392
  • 文/花漫 我一把揭開白布智什。 她就那樣靜靜地躺著,像睡著了一般丁屎。 火紅的嫁衣襯著肌膚如雪荠锭。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,521評論 1 304
  • 那天晨川,我揣著相機(jī)與錄音证九,去河邊找鬼。 笑死共虑,一個胖子當(dāng)著我的面吹牛愧怜,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播妈拌,決...
    沈念sama閱讀 40,288評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼拥坛,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了尘分?” 一聲冷哼從身側(cè)響起猜惋,我...
    開封第一講書人閱讀 39,200評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎培愁,沒想到半個月后著摔,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,644評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡定续,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,837評論 3 336
  • 正文 我和宋清朗相戀三年梨撞,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片香罐。...
    茶點(diǎn)故事閱讀 39,953評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖时肿,靈堂內(nèi)的尸體忽然破棺而出庇茫,到底是詐尸還是另有隱情,我是刑警寧澤螃成,帶...
    沈念sama閱讀 35,673評論 5 346
  • 正文 年R本政府宣布旦签,位于F島的核電站,受9級特大地震影響寸宏,放射性物質(zhì)發(fā)生泄漏宁炫。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,281評論 3 329
  • 文/蒙蒙 一氮凝、第九天 我趴在偏房一處隱蔽的房頂上張望羔巢。 院中可真熱鬧,春花似錦、人聲如沸竿秆。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,889評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽幽钢。三九已至歉备,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間匪燕,已是汗流浹背蕾羊。 一陣腳步聲響...
    開封第一講書人閱讀 33,011評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留帽驯,地道東北人龟再。 一個月前我還...
    沈念sama閱讀 48,119評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像界拦,于是被迫代替她去往敵國和親吸申。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,901評論 2 355

推薦閱讀更多精彩內(nèi)容