1 简单描述
1 它可以搭建一个 CLI 环境
2 Dva 核心是一个基于 redux 和 redux-saga 的数据流方案
3 为了简化开发体验, 还内置了 react-router 和 fetch
4 我们可以不使用它搭建 CLI 来使用它去管理全局数据吗 ??
2 Dva 基本流程
1 公共数据 Models
------------------------------------------------------------------------------
1 相关理解:
1 在全局状态模块中, 又可以分为同步数据和异步数据
2 组件内部可以调用同步和异步, 但是异步需要经过同步的处理才可以, 让我们使用
3 同步 Reducer:
4 异步 Effect:
------------------------------------------------------------------------------
2 私有数据 state
------------------------------------------------------------------------------
------------------------------------------------------------------------------
3
4
5
2 基础项目目录结构
1 mock
2 public
3 src
1 models
2 routes
3 services
4 utils
5 router.js
3 Dva 中定义路由
1 定义路由文件:
2 编辑 router.js
+ import A1 from "./routes/A1"
+ <Route path="/a1" exact component={A1}/>
4 Dva 中的一些 API
1 React 中的跳转标签
+ import {Link} from 'dva/router'
+ <Link to="/"> 首页</Link>
2 高阶组件 -> 被它修饰过的组件内部的 props上, 会增加 history路由跳转功能
+ import {withRouter} from 'dva/router'
+ this.props.history.push("/")
+ export default withRouter(A1)
5 models 全局窗台管理 🔶
1 模块数据配置流程
-----------------------------------------------------------------------------------------
1 新建命名空间: src/models/test
2 index.js -> Model(参照格式)
+ app.model(require('./models/test').default);
-----------------------------------------------------------------------------------------
2 单文件组件中如何访问数据
-----------------------------------------------------------------------------------------
+ import {connect} from 'dva'
+ class A1 extends React.Component{
+ render() {return (<Fragment>{this.props.name}</Fragment>)}
+ }
+ const mapStateToProps = state => {
console.log(state);
return {
msg: "zhang"
name: state.test.name
}
}
+ export default connect(mapStateToProps)(A1)
-----------------------------------------------------------------------------------------
3 单文件组件中如何调用方法
-----------------------------------------------------------------------------------------
import {connect} from 'dva'
class A1 extends React.Component{
hh() {
this.props.dispatch({
type: "test/setName"
})
}
render() {return (<Fragment>
<button onClick={()=>this.hh()}> setName </button>
</Fragment>)}
}
const mapStateToProps = state => {
return {
哈哈
}
}
export default connect(mapStateToProps)(A1)
-----------------------------------------------------------------------------------------
4