使用history路由

//安装history
"npm i history -S"

//配置到index.js中
const app = dva({
    history: createBrowserHistory(),
})

.webpackrc文件更改为.webpackrc.js

//配置文件
export default {
    publicPath: '/',

    extraBabelPlugins: [
        ['import', { 'libraryName': 'antd', 'libraryDirectory': 'es', 'style': 'css' }]
    ],

    alias: {
        '@': `${__dirname}/src`,
    },

    proxy: {
        '/api': {
            target: 'url网址',
            changeOrigin: true,
            pathRewrite: {
                '^/api': '',
            }
        }
    }
}

models存放redux

//state定义redux数据
state: {
    name: "XXX"
}

//reducers触发变更----只能修改同步数据
reducers: {
    updateName(state, action) {
    return { ...state, name: action.payload }
  }
}

//effects修改异步数据
effects: {
    *fetch({ payload }, { call, put, select }) {
      //调用接口
      const dt = yield call(homeApi.bill)
      //在异步里触发一个reducer使用put
      yield put({
        type: 'updateData',
        payload: { data: dt }
      })
    }
  }

subscriptions自动执行

test({ history, dispach }) {
      history.listen(({ pathname }) => {
        //这里正则判断
        const regxp = pathToRegexp(/\//img).test(pathname)
        if (regxp) {
          //这里可以写路由守卫
          console.log(regxp)
    }
  })
}

services对应models中的每个文件

import api from './api'  //调用封装导出的接口
import { get } from '@/utils/request'  //调用request

export const bill = () => get(api.findUser)

connect

//不从redux中引入  从dva中引入 使用方法一样
import { connect } from 'dva'

@connect(state => {
    return {
        name: state.home.name
    }
}) 
export default class extends React.Component {
    render() {
        const { name } = this.props
        return (
            <h1>{name}</h1>
        )
    }
}

触发dispatch修改同步/异步数据

this.props.dispatch({
    type: 'home/updateName', //与models中定义的reducers的方法名相同
    payload: 'XXX'
})

数据持久化

//index.js配置
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'

const persistConfig = {
    key: 'home',
    storage,
    whitelist: ['home']  //白名单
}

const persistEnhancer = () => createStore => (reducer, initialState, enhancer) => {
    const store = createStore(persistReducer(persistConfig, reducer), initialState, enhancer)
    const persist = persistStore(store)
    return { ...store, persist }
}