官网:入门课 | DvaJS
备注:个人学习
getColumns.js
- const getColumns = [
- {
- title: '姓名', // 列标题
- dataIndex: 'name', // 数据字段名称,与数据中的字段名对应
- key: 'name', // 列的唯一键
- },
- {
- title: '年龄', // 列标题
- dataIndex: 'age', // 数据字段名称,与数据中的字段名对应
- key: 'age', // 列的唯一键
- },
- ];
-
- export default getColumns
model.js
- import {
- Test
- } from 'utils/api'
-
-
- export default {
- namespace: "myName",
- state: {
- jsonData: [],
- },
- effects: {
- // 获取列表信息
- * getMyName({}, {put, call, select}) {
- const res = yield call(Test);
- console.log("======================================================",res.data)
- if (res.meta.statusCode === 200) {
- // 设置state
- yield put({
- type: "selectMyName",
- payload: {
- jsonData: res.data,
- }
- });
- }
- },
- },
- reducers: {
- selectMyName(state, {payload}) {
- return {...state, ...payload};
- },
- setState(state, { jsonData }) {
- return {
- ...state,
- ...jsonData
- };
- }
- }
- };
index.js
- import React from "react";
- import {connect} from "react-redux";
- import { Button, Table} from "antd";
- import styles from "../ordinary/index.less";
- import PermissionDiv from "utils/PermissionDiv";
- import getColumns from "../ordinary/getColumns";
-
- @connect((state) => {
- const {myName, login} = state;
- return {...myName, login};
- })
- export default class Test extends React.Component {
- constructor(props) {
- super(props);
- }
- // static getDerivedStateFromProps(nextProps,nextState) {
- // console.log("========================",nextProps,nextState)
- // }
- componentWillMount() {
- console.log("666",this.props)
- //获取已存在的发起单位list
- this.props.dispatch({
- type: 'myName/getMyName'
- });
- }
- render() {
- const { jsonData } = this.props;
- console.log("查出来的数据",jsonData)
- const columns = getColumns
- return (
- <div className={styles.box}>
- <div className={styles.topBoxL} id="coll_xzrw">
- <PermissionDiv perms={"ly-dcp_fill_collection_test_add"}>
- <Button type="primary">
- 新增任务
- Button>
- PermissionDiv>
- div>
- <Table dataSource={jsonData} columns={columns} rowKey="name" />
- div>
- );
- }
- }
-
Dva.js 是一个基于 React 和 Redux 的轻量级前端框架,用于帮助开发者更容易地管理应用的状态和副作用。Dva.js 在 React 应用中提供了一种可预测的状态管理方式,并降低了 Redux 的复杂性。dva 是体验技术部开发的 React 应用框架,将上面三个 React 工具库包装在一起,简化了 API,让开发 React 应用更加方便和快捷。
dva = React-Router + Redux + Redux-saga
- import dva from 'dva';
- const App = () => <div>Hello dvadiv>;
-
- // 创建应用
- const app = dva();
- // 注册视图
- app.router(() => <App />);
- // 启动应用
- app.start('#root');
State 是储存数据的地方,收到 Action 以后,会更新数据。
View 就是 React 组件构成的 UI 层,从 State 取数据后,渲染成 HTML 代码。只要 State 有变化,View 就会自动更新。
Action 是用来描述 UI 层事件的一个对象。
- {
- type: 'click-submit-button',
- payload: this.form.data
- }
connect 是一个函数,绑定 State 到 View。
- import { connect } from 'dva';
-
- function mapStateToProps(state) {
- return { todos: state.todos };
- }
- connect(mapStateToProps)(App);
connect 方法返回的也是一个 React 组件,通常称为容器组件。因为它是原始 UI 组件的容器,即在外面包了一层 State。
connect 方法传入的第一个参数是 mapStateToProps 函数,mapStateToProps 函数会返回一个对象,用于建立 State 到 Props 的映射关系。
dispatch 是一个函数方法,用来将 Action 发送给 State。
- dispatch({
- type: 'click-submit-button',
- payload: this.form.data
- })
dispatch 方法从哪里来?被 connect 的 Component 会自动在 props 中拥有 dispatch 方法。
connect 的数据从哪里来?
- // 创建应用
- const app = dva();
-
- // 注册 Model
- app.model({
- namespace: 'count',
- state: 0,
- reducers: {
- add(state) { return state + 1 },
- },
- effects: {
- *addAfter1Second(action, { call, put }) {
- yield call(delay, 1000);
- yield put({ type: 'add' });
- },
- },
- });
-
- // 注册视图
- app.router(() => <ConnectedApp />);
-
- // 启动应用
- app.start('#root');
dva 提供 app.model 这个对象,所有的应用逻辑都定义在它上面。
- const app = dva();
-
- // 新增这一行
- app.model({ /**/ });
-
- app.router(() => <App />);
- app.start('#root');
- {
- namespace: 'count',
- state: 0,
- reducers: {
- add(state) { return state + 1 },
- },
- effects: {
- *addAfter1Second(action, { call, put }) {
- yield call(delay, 1000);
- yield put({ type: 'add' });
- },
- },
- }
Reducer 是 Action 处理器,用来处理同步操作,可以看做是 state 的计算器。它的作用是根据 Action,从上一个 State 算出当前 State。
一些例子:
- // count +1
- function add(state) { return state + 1; }
-
- // 往 [] 里添加一个新 todo
- function addTodo(state, action) { return [...state, action.payload]; }
-
- // 往 { todos: [], loading: true } 里添加一个新 todo,并标记 loading 为 false
- function addTodo(state, action) {
- return {
- ...state,
- todos: state.todos.concat(action.payload),
- loading: false
- };
- }
Action 处理器,处理异步动作,基于 Redux-saga 实现。Effect 指的是副作用。根据函数式编程,计算以外的操作都属于 Effect,典型的就是 I/O 操作、数据库读写。
- function *addAfter1Second(action, { put, call }) {
- yield call(delay, 1000);
- yield put({ type: 'add' });
- }
Effect 是一个 Generator 函数,内部使用 yield 关键字,标识每一步的操作(不管是异步或同步)。
dva 提供多个 effect 函数内部的处理函数,比较常用的是 call
和 put
。