react+redux的一些思考

我们经常把react和redux放到一起.react大家都很熟悉,我们先简单的看下redux

什么是redux?

redux我理解就是一个状态管理器，它提供了二个基本的接口函数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:[]})
 //这样一个最基本的redux就创建了

我们来看看createStore里面发生了什么?

• 1.createStore传入reducer创建了store, 建立了一个订阅了关系 store---订阅--->reducer
• 2.只要store运行dispatch触发reducer
• 3.运行reducer就会返回newState

applyMidderware呢？applyMidderware就是给在dispatch里面注入了一些功能.就像
var fn = debounce(fn) fn函数注入到debounce（防抖）里面使fn具有防抖的功能，在这里先不讨论它.

呃呃，redux就这样啊？？那跟react有毛线的关系啊？？？

react通信

我们先来看看react通信方式, 以一个日历插件为例子吧

2`2@_L{D9AK_E9_CW~FIX9L.png

在React里面是这样的

var DateShow = (props) => {
    return <div>props.date</div>
}
var Date = (props) =>{
    return <div>日期页</div>
}
var DateDetail = (props) => {
    return <div>日期详情</div>
}
var Main = (props) =>{
    return (
        <div>
            <div>拿到点击的日期,渲染list</div>
            <div className="left">
                <DateShow />
                <Date />
            </div>
            <div className="right">
                <DateDetail />
            </div>
        </div>)
}

.子与父，父与子之间的通信

Date有个初始的日期，然后点击的date拿到当前的日期这时Main需要重新渲染list,

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

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

子与子通信

点击date，DateDetail根据date渲染详情页.那么只能这样,点击date之后Main拿到date，然后把date传入DateDetail中

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

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

思考

如果Main不需要渲染list，那么setState({Date})对于Main来说就是额外冗余的状态了，如果Date与DateDetail与通信非常多的，例如还有星期，点击星期那个DateDetail发生什么!那么Main就需要setState({week})...这仅仅是二个子组件互相通信，如果是4个，5个.冗余的状态就非常非常多，Main将无法维护下去。那么能不能这样，Date与DateDatail直接进行通信?

react+redux

我们可以在Date进行diapatch, store触发reducer拿到新的statem然后在DateDetail接收newState来重新渲染ui.这样Main就不需要去存储额外的state和函数项目更易维护，那么问题来了如何建立这种通信关系？.仅仅靠redux是很难完成的.例如Date如何dispatch?DateDetail怎么拿到newState?

react-redux