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>

)

}

}