我们在写React应用时,通常用到redux做状态管理,然后会用到一些中间件来支持异步action,比如redux-thunk.通常我们的代码类似下面这样的:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
//ActionType  R.js
export ActionType{
TYPE1:'type1',
TYPE2:'type2',
TYPE3:'type3',
// others
}

//reducer reducer.js
import {ActionType as AT} from 'R'
export default function(state={},action){
switch(action.type){
case AT.TYPE1:
return {
...state,
...action.data,
// or other
}
case AT.TYPE2:
//...
default:
return state
}
}

//Action Action.js
import {ActionType as AT} from 'R'
const act = {
action1:data=>dispatch=>{
// some action such as ajax
dispatch({
type:AT.TYPE1,
data:{
// data
}
})
}
action2:()=>(dispatch,getState)=>{
// call another action
dispatch(act.action3())
}
action3:()=>()=>{
// even you never use the dispath or getState,you still have to code like this.
}
}
export default act

// Component
@connect(
state=>state.reducer1,
dispatch=>bindActionCreators(Action,dispatch)
)
export default class View extends React.Component{

doAction1(){
this.props.action1({})
}

render(){
return(
<div>
anything else
</div>
)
}
}

  功能很简单,却需要些这么多actionType, reducer里面还有那么多case分支。而最烦的是action,直觉上我们是希望能够写普通的function,而不用强行写上dispatch和getState, 一个action调用另一个action竟然也不能直接调用。虽然我们知道是需要这样做,需要用actionType来区分action,reducer里面也需要根据type来做相应的更新,action中也需要dispatch来发出action。

  但如果我们就是不想写的这么麻烦,能有什么办法吗?

  答案之一是用mobx之类的工具来管理状态。当然,本文要介绍的是在redux中的方法,ev-redux. 先来看看使用后的效果:

  首先安装:npm i --save ev-redux

  然后你的代码差不多是这样:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
// init evStore in you app.js when create store.
import {evStore} from 'easy-redux'
const store = createStore(...)
evStore.init(store)

// redux/reducer.js
import {ActionType as TYPE} from './index.js'
const initState={}
export default function(state=initState,action){
if(action.type === TYPE){
return {
...state,
...action.data
}
}
return state
}

// redux/Action.js
import {evRedux} from 'ev-redux'

@evRedux
export default class Action{
constructor(actionType){
this.actionType = actionType
}
action1(x){
this.update({
x
})
}
action2(){
this.dispatch({
type:this.actionType,
data:{y:this.getState().reducer2.y+1}
})
// to call another action, just call no need dispath!
this.action3({z:3})
// or just update
// this.update({y:this.getState().reducer2.y+1})
}
action3(z){
setTimeout(()=>{
this.update({z})
},1000)
}
}

// redux/index.js
import Action from './Action'
import reducer from './reducer'
import {connect as conn} from 'react-redux'

const connect = view => conn(state=>state.reducer2)(view)
const ActionType = Symbol()
const action = new Action(ActionType)

export {reducer,ActionType,action,connect}

// Component
import action from './action'
@connect
export default class View extends React.Component{

doAction1(){
// just call an action as we call a function.
action.action1()
}

render(){
return(
<div>
anything else
</div>
)
}
}

  不要只看着代码并没有减少。仔细看看 reducer和action部分,这样的action,这样的reducer你还不愿意用嘛?

  • 不需要中间件来支持异步任务。
  • 不需要去写那么多actionTypes,一个reducer对应一个action就行,使用symbol保证不重复。
  • reducer中不需要那么多case分支,只需要合并一下action传过来的state和原来的state就可以。
  • 重点是action,不需要手动在每个方法上加上dispatch和getState.你只需要在需要更新store时,构造好需要更新的那部分state,,然后调用update就行,type都不需要带。update哪儿来的?你直接用就行,后面会说。如果你想要用dispath和getState,直接从上下文取就行,this.dispatch,this.getState随便用。调用其他action,直接用this调用就ok,就像调用普通方法那样调用。

ok了,用法介绍完了。具体的原理简单说明一下:

  首先我们要触发reducer来更新store,就要用到dispatch来分发action。我们的update方法里面就是这么做的。之所以把构造要更新的state方法action, 而不是在reducer中通过不同的type来区分,是因为我觉得对于每个action,里需要更新那部分state,在action里面你是最清楚的。如果你在actino里面只是dispatch一个action,然后去reducer中构造state结构并更新,你不仅要写很多个多余的actionType,而且可能还要回头看这个type是哪个action触发的,还要回想这个action里面传过来的data是什么样的,明显比在action中构造要复杂。

  至于为什么action中我们明明没写update,却可以直接用,其实在easy-redux中,我们对action做了代理。在初始或easyStore时,我们能够获取到dispatch和getState,然后在action的get方法中,我们用反射来set update、dispatch、getState. 这样在我们的action中就能够直接在上下文中调用到它们了。

  原理就是用到js里面的代理和反射,代码也很简单,这里就不展开说明了,直接放上github地址:https://github.com/evolify/EvRedux