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通信方式, 以一个日历插件为例子吧
在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?
