Redux 学习 - umijs

终于到最后一篇文章了。这次开始学习 umi 架构的 redux 用法。

对于 umi (dva)体系,主要是集成了 react react-router react-redux redux-saga 等。比起 redux-saga,好处是做了高度封装,将原本的 reducer.js 和 sagas.js 统一到了一个 model.js 中。

创建 umi 架构项目,可以通过官方脚手架来完成。具体可参考 官方文档

创建项目后,配置文件等不进行调整,因为这次主要学习 model.js 的写法而已。

直接上代码

本次的示例代码 见此

相对于之前的 redux-saga 项目,我们只需要调整两个文件。一个是页面组件,负责页面展示(按钮控制)的功能调用 dispatch 轻微调整;以及一个 model 文件,来代替原本的 reducer 和 sagas 文件。

models/global.js

我们先创建一个 model 文件,内容如下:

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
const delay = timeout => new Promise(resolve => setTimeout(resolve, timeout))

export default {
namespace: 'global',
state: {
count: 10,
},
reducers: {
increment (state, action) {
return {
...state,
count: state.count + action.payload,
}
},
decrement (state, action) {
return {
...state,
count: state.count - action.payload,
}
},
},
effects: {
*incrementAsync (action, { put }) {
yield delay(1000)
yield put({ type: 'increment', payload: action.payload })
},
decrementAsync: [
function* (action, { put }) {
yield delay(1000)
yield put({ type: 'decrement', payload: action.payload })
},
{ type: 'takeLatest' }
]
},
}

由于在 umi 体系下没找到 delay 方法,所以我直接实现了一下。在 redux-saga 例子中,官方是提供 delay 方法的,所以直接引用的。

按照官方的格式,我们写一个对象(如上代码),定义了一些属性。其中定义了一个 namespace: 'global',即这是一个命名空间为 global 的 model。后续我们在读取状态、dispatch 时候都要用到。

state 中存放初始化的状态。

在组件内 dispatch 后,会根据调用的类型直接路由到对应的 reducers 或者 effects

reducers 和之前 redux 中用法一样,负责同步修改 state 内容。注意也是要返回一个新的 state 对象,并且函数必须是无副作用的。

effects 就是处理副作用的位置。完成副作用(比如异步获取数据)后,通过 put(相当于 dispatch)调用后续合适的 reducers 方法,完成 state 更新。这里要注意的是,通过 put 调用,直接写类型即可,不需要写命名空间。即 不用写成 put({ type: 'global/increment', payload: action.payload })

这个例子 effects 写了两种用法。

一种是默认的 takeEvery,在 redux-saga 中我们接触过它。默认写法的语法是:

1
*incrementAsync (action, effects) {}

另一种是 takeLatest,这个不是默认值,所以需要配置,语法是:

1
2
3
4
decrementAsync: [
function* (action, effects) {},
{ type: 'takeLatest' }
]

两种的区别在于,入口一个是 generator 函数(有星号),一个是普通数组,数组内第一个参数是 generator 函数,第二个是类型配置。

index.js

参考之前的 redux-saga 的组件,我们基本上调整内容很少。

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
import React from "react"
import { connect } from "dva"

class Counter extends React.PureComponent {
render () {
const { globalState, dispatch } = this.props
return (
<div>
<p>COUNT:{globalState.count}</p>
<button onClick={() => dispatch({ type: "global/increment", payload: 1 }) }>
+1
</button>
<button onClick={() => dispatch({ type: "global/decrement", payload: 1 }) }>
-1
</button>
<button onClick={() => dispatch({ type: "global/incrementAsync", payload: 2 }) }>
+2 async takeEvery
</button>
<button onClick={() => dispatch({ type: "global/decrementAsync", payload: 2 }) }>
-2 async takeLatest
</button>
</div>
)
}
}

const mapStateToProps = state => ({ globalState: state.global })
export default connect(mapStateToProps)(Counter)

主要的区别是,我们由于定义了一个全局 model,叫做 global(在 models/global.js 中定义),所以调用时候必须加上命名空间。即 dispatch({ type: "global/increment", payload: 1 }

其他文件都不需要再修改了。

–END–