namespace

The model namespace, which is also its property on global state, can only be strings. To create a multi-layer namespace.

State (similar to vuex state)

The initial value.

Reducers (similar to Vuex’s Mutainers)

Used to handle synchronization operations, the only place where state can be changed. Triggered by action.

  • Class is a stateful component of a class
// model / technique.js export default { namespace: 'technique', state: { msg: 'hello world' }, reducers: { setList(state, {payload}) { return { ... state, msg: payload} } }, effects: { } } // page / technique / index.js import React, { PureComponent } from 'react'; import { Button } from 'antd'; import { connect } from 'dva'; @connect(({technique}) => ({ technique: technique })) class Technique extends PureComponent { render() { return ( <div> <h1> {this.props.technique.msg} </h1> <Button type="primary" onClick={this.handleClick}>Primary</Button> </div> ) }; HandleClick = async () => {await this.props. Dispatch ({type: 'technique/setList', payload: 'successful'}); }; } export default Technique;Copy the code
  • Function a stateless component
// model / technique.js export default { namespace: 'technique', state: { msg: 'hello world' }, reducers: { setList(state, {payload}) { return { ... State, MSG: payload}}}, effects: {}} // page/technique/index.js /** * title: * - ./src/routes/PrivateRoute.js */ import React from 'react'; import { Button } from 'antd'; import { connect } from 'dva'; function Technique(props) { const handleClick = async () => { await props.dispatch({ type: 'technique/setList', payload: 'success'}); }; return ( <div> <h1> {props.msg} </h1> <Button type="primary" onClick={handleClick}>Primary</Button> </div> ) } export default connect(({technique}) => ({... technique}))(Technique);Copy the code

Effects (Actions similar to Vuex)

// src/services/form import { request } from '@/http/ajax'; export function getList(params) { return request('/technique-sharing/techniqueSharingList', { method: 'POST', body: JSON.stringify(params), }); } // model / technique.js import * as formServices from '@/services/form'; export default { namespace: 'technique', state: { list: [] }, reducers: { setAllList(state, {payload}) { return { ... state, list: payload} } }, effects: { *getList ({ payload }, { call, put }) { const res = yield call(formServices.getList, payload); if (res.ok) { yield put({ type: 'setAllList', payload: res.data.list }); } }, } } //page / technique / index.js import React from 'react'; import { Button } from 'antd'; import { connect } from 'dva'; function Technique(props) { const handleRequst = async () => { let params = { page: 1, size: 10, }; await props.dispatch({ type: 'technique/getList', payload: params }) }; return ( <div> <ul> { props.list.map(item => { return ( <li key={item.regTime}> {item.title} </li> ) }) } </ul> <Button </Button> </div>)} export default connect(({technique}) => ({... technique}))(Technique);Copy the code

Subscriptions (Self-executing)

import * as formServices from '@/services/form'; export default { namespace: 'technique', state: { list: [] }, reducers: { setAllList(state, {payload}) { return { ... state, list: payload} } }, effects: { *getList ({ payload }, { call, put }) { const res = yield call(formServices.getList, payload); if (res.ok) { yield put({ type: 'setAllList', payload: res.data.list }); } }, }, subscriptions: { setup({ dispatch, Listen (({pathname}) => {if (pathname === '/ techniques-sharing ') {let params = { page: 1, size: 10, }; dispatch({ type: 'getList', payload: params }) } }) } } }Copy the code