react+redux的一些思考

我們經(jīng)常把react和redux放到一起.react大家都很熟悉,我們先簡(jiǎn)單的看下redux

什么是redux?

redux我理解就是一個(gè)狀態(tài)管理器，它提供了二個(gè)基本的接口函數(shù)createStore和applyMiddleware

 import {createStore, applyMiddleware} from "redux";
 const reducer = (state, action) => {
       if(action.type == "add") {
         return {
            ...state,
            list:state.list.concat([action.payload])
         }
       }
       return state
 }    
 var store = createStore(reducer, {name:"leiwuyi", list:[]})
 //這樣一個(gè)最基本的redux就創(chuàng)建了

我們來(lái)看看createStore里面發(fā)生了什么?

• 1.createStore傳入reducer創(chuàng)建了store, 建立了一個(gè)訂閱了關(guān)系 store---訂閱--->reducer
• 2.只要store運(yùn)行dispatch觸發(fā)reducer
• 3.運(yùn)行reducer就會(huì)返回newState

applyMidderware呢？applyMidderware就是給在dispatch里面注入了一些功能.就像
var fn = debounce(fn) fn函數(shù)注入到debounce（防抖）里面使fn具有防抖的功能，在這里先不討論它.

呃呃，redux就這樣??？？那跟react有毛線的關(guān)系?。?？？

react通信

我們先來(lái)看看react通信方式, 以一個(gè)日歷插件為例子吧

2`2@_L{D9AK_E9_CW~FIX9L.png

在React里面是這樣的

var DateShow = (props) => {
    return <div>props.date</div>
}
var Date = (props) =>{
    return <div>日期頁(yè)</div>
}
var DateDetail = (props) => {
    return <div>日期詳情</div>
}
var Main = (props) =>{
    return (
        <div>
            <div>拿到點(diǎn)擊的日期,渲染list</div>
            <div className="left">
                <DateShow />
                <Date />
            </div>
            <div className="right">
                <DateDetail />
            </div>
        </div>)
}

.子與父，父與子之間的通信

Date有個(gè)初始的日期，然后點(diǎn)擊的date拿到當(dāng)前的日期這時(shí)Main需要重新渲染list,

<Date onChangeDate={(date)=>this.renderList(date)} />

<Date onChangeDate={(date)=>this.renderList(date)}  initDate="2017-07-20"/>

子與子通信

點(diǎn)擊date，DateDetail根據(jù)date渲染詳情頁(yè).那么只能這樣,點(diǎn)擊date之后Main拿到date，然后把date傳入DateDetail中

<Date onChangeDate={(date)=>this.setState({date})}  />

<DateShow date={this.state.date}  />

思考

如果Main不需要渲染list，那么setState({Date})對(duì)于Main來(lái)說(shuō)就是額外冗余的狀態(tài)了，如果Date與DateDetail與通信非常多的，例如還有星期，點(diǎn)擊星期那個(gè)DateDetail發(fā)生什么!那么Main就需要setState({week})...這僅僅是二個(gè)子組件互相通信，如果是4個(gè)，5個(gè).冗余的狀態(tài)就非常非常多，Main將無(wú)法維護(hù)下去。那么能不能這樣，Date與DateDatail直接進(jìn)行通信?

react+redux

我們可以在Date進(jìn)行diapatch, store觸發(fā)reducer拿到新的statem然后在DateDetail接收newState來(lái)重新渲染ui.這樣Main就不需要去存儲(chǔ)額外的state和函數(shù)項(xiàng)目更易維護(hù)，那么問(wèn)題來(lái)了如何建立這種通信關(guān)系？.僅僅靠redux是很難完成的.例如Date如何dispatch?DateDetail怎么拿到newState?

react-redux