前言
本文是作者对redux相关使用的总结，利用一个简单的计数器应用介绍来flux、redux、react-redux、redux-actions等相关类库的使用。
初始代码
以下是该示例的初始代码，一个不使用redux的普通计数器应用。
import React from 'react'
class Calculate extends React.Component {
constructor(props) {
super(props)
this.state = {
count: 0
}
}
increase = () => {
this.setState({
count: this.state.count + 1
})
}
decrease = () => {
this.setState({
count: this.state.count - 1
})
}
render() {
return(
<div>
<h1>{this.state.count}</h1>
<div>
<button type="button" onClick={this.increase}>Increase</button>
<button type="button" onClick={this.decrease}>Decrease</button>
</div>
</div>
)
}
}
export default Calculate
Flux
React是单向数据流，组件状态的维护是靠父子组件之间逐层传递来实现的，当应用层级较深时，这种方式就会显得比较繁琐。对此，社区提出了不少解决的方案，目前的最佳实践是Redux。
Redux严格意义上来讲是Flux的一种简洁的实现，在介绍Redux之前，我们先使用flux来重构这个计数器应用。
Flux主要流程有4部分，action、dispatcher、store、view，在该示例中我们需要使用到flux和events两个npm包来实现。
首先，在基础模板上建立目录如下
actionType.js用来定义常量，然后导出,该示例有加和减两种action。
export const INCREASE = 'INCREASE'
export const DECREASE = 'DECREASE'
dispatcher.js用来定义dispatcher并导出
import { Dispatcher } from 'flux'
class CalculateDispatcherClass extends Dispatcher {
handleAction(action) {
this.dispatch({
type: action.type,
payload: action.payload
})
}
}
const CalculateDispatcher = new CalculateDispatcherClass()
export default CalculateDispatcher
action.js使用导入的action类别以及上面定义的dispatcher来定义action。
import {
INCREASE,
DECREASE
} from '../constants/actionTypes'
import CalculateDispatcher from '../dispatcher/dispatcher'
const action = {
increase(value = 1) {
CalculateDispatcher.handleAction({
type: INCREASE,
payload: value
})
},
decrease(value = 1) {
CalculateDispatcher.handleAction({
type: DECREASE,
payload: value
})
}
}
export default action
最后在store.js中整合
import CalculateDispatcher from '../dispatcher/dispatcher'
import { EventEmitter } from 'events'
import {
INCREASE,
DECREASE
} from '../constants/actionTypes'
const store = {
count: 0
}
class CalculateStoreClass extends EventEmitter {
addIncreaseListener(callBack) {
this.on(INCREASE, callBack)
}
addDecreaseListener(callBack) {
this.on(DECREASE, callBack)
}
getStore() {
return store
}
}
const CalculateStore = new CalculateStoreClass()
CalculateDispatcher.register((action) => {
switch(action.type) {
case INCREASE:
store.count += action.payload
CalculateStore.emit(INCREASE)
break
case DECREASE:
store.count -= action.payload
CalculateStore.emit(DECREASE)
break
default:
return true
}
return true
})
export default CalculateStore
最后calculate.js存放我们的视图组件
import React from 'react'
import Store from '../store/store'
import Action from '../action/action'
class Calculate extends React.Component {
constructor(props) {
super(props)
this.state = {
count: 0
}
}
componentDidMount() {
Store.addDecreaseListener(this.updateState)
Store.addIncreaseListener(this.updateState)
}
updateState = () => {
this.setState({
count: Store.getStore().count
})
}
increase = () => {
Action.increase()
}
decrease = () => {
Action.decrease()
}
render() {
return(
<div>
<h1>{this.state.count}</h1>
<div>
<button type="button" onClick={this.increase}>Increase</button>
<button type="button" onClick={this.decrease}>Decrease</button>
</div>
</div>
)
}
}
export default Calculate
Redux
了解来Flux之后，就可以使用Redux了，Redux和Flux的不同在与将dispatcher换成了reducer
首先看一下项目结构，与flux的基本没有区别，只是将dispatcher换成了reducer
该示例中不仅使用了redux, 还使用了react-redux,使得redux和react项目更容易结合，使用了redux-actions,使action和reducer中类型的判断更加简单。
actionType.js
export const INCREASE = 'INCREASE'
export const DECREASE = 'DECREASE'
action.js 利用redux-actions来创建action
import { INCREASE, DECREASE} from '../constants/actionTypes'
import { createActions} from 'redux-actions'
const Action = createActions({
[INCREASE]: (value = 1) => ({
payload: value
}),
[DECREASE]: (value = 1) => ({
payload: value
})
})
export default Action
reducer.js 同样，利用redux-actions来处理reducer
import { INCREASE, DECREASE } from '../constants/actionTypes'
import { handleActions} from 'redux-actions'
const reducer = handleActions({
[INCREASE]: (state, action) => (Object.assign({}, state, { count: state.count + action.payload.payload})),
[DECREASE]: (state, action) => (Object.assign({}, state, { count: state.count - action.payload.payload}))
}, {
count: 0
})
export default reducer
store.js 利用redux创建store
import { createStore } from 'redux'
import reducer from '../reducer/reducer'
const store = createStore(reducer)
export default store
calculate.js 利用react-redux来连接react和redux
import React from 'react'
import Action from '../action/action'
import { connect } from 'react-redux'
class Calculate extends React.Component {
increase = () => {
this.props.increase()
}
decrease = () => {
this.props.decrease()
}
render() {
return(
<div>
<h1>{this.props.count}</h1>
<div>
<button type="button" onClick={this.increase}>Increase</button>
<button type="button" onClick={this.decrease}>Decrease</button>
</div>
</div>
)
}
}
const mapStateToProps = (state) => {
return {
count: state.count
}
}
export default connect(mapStateToProps, Action)(Calculate)
最后，在App.js中使用Provider将store传入
import React from 'react'
import Calculate from './component/calculate'
import { Provider } from 'react-redux'
import store from './store/store'
class App extends React.Component {
render() {
return (
<Provider store={store}>
<Calculate />
</Provider>
)
}
}
export default App
网友评论