redux沉思录
要素：store、reducer、dispatch/subscribe
connect：将业务逻辑剥离到容器类，数据的双向绑定；
数据、操作、UI分离、命令封装
核心思想：对共享状态的维护；
核心代码：
store={createStore(reducer)
const reducer = (state = 'GO', action) => {
switch(action.type) {
case 'GO':
state = 'GO'
break;
}
this.props.store.subscribe(() => {
this.forceUpdate();
});
<button onClick={() => {this.props.store.dispatch(goAction)}}
与flux的比较：
将状态修改的功能进行了剥离；
'use strict';
import React from 'react';
import ReactDOM from 'react-dom';
import Redux, { createStore } from 'redux';
import { reducer } from './reducer';
import { App } from './app';
ReactDOM.render(<App store={createStore(reducer)}/>,
document.getElementById('root'))
'use strict';
import React, { Component } from 'react';
const stopColor = (store) => {
return store.getState() == 'STOP' ? 'red' : 'white';
}
const cautionColor = (store) => {
return store.getState() == 'CAUTION' ? 'yellow' : 'white';
}
const goColor = (store) => {
return store.getState() == 'GO' ? 'rgb(39,232,51)' : 'white';
}
export class Stoplight extends Component {
componentWillMount() {
this.props.store.subscribe(() => {
this.forceUpdate();
});
}
render() {
return(
<div style={{textAlign: 'center'}}>
<svg height='170'>
<circle cx='145' cy='60' r='15'
fill={stopColor(this.props.store)}
stroke='black'/>
<circle cx='145' cy='100' r='15'
fill={cautionColor(this.props.store)}
stroke='black'/>
<circle cx='145' cy='140' r='15'
fill={goColor(this.props.store)}
stroke='black'/>
</svg>
</div>
)
}
}
'use strict';
import React, { Component } from 'react';
import { goAction, cautionAction, stopAction } from './actions';
export class Buttons extends Component {
componentWillMount() {
this.props.store.subscribe(() => {
this.forceUpdate();
});
}
render() {
const state = this.props.store.getState();
return(
<div style={{textAlign: 'center'}}>
<button onClick={() => {this.props.store.dispatch(goAction)}}
disabled={state == 'GO' || state == 'CAUTION'}
style={{cursor: 'pointer'}}>
Go
</button>
<button onClick={() => {this.props.store.dispatch(cautionAction)}}
disabled={state == 'CAUTION' || state == 'STOP'}
style={{cursor: 'pointer'}}>
Caution
</button>
<button onClick={() => {this.props.store.dispatch(stopAction)}}
disabled={state == 'STOP' || state == 'GO'}
style={{cursor: 'pointer'}}>
Stop
</button>
</div>
)
}
}
