taro3.*中使用 dva 入门级别的哦

如果你用dva做react项目的状态管理,简直不要太爽了,这部最近 要做一个小程序, 不让用原生开发, 我就选择了taro框架,来开发小程序,

但是状态管理这块我还想用dva 怎么办呢。其实还是可以用的
各位同学请接着往下看

---

博主的taro版本是 3.4的哦 还是比较新的呢

1,工欲善其事,必先利其器 开始之前,我们安装一大堆东西哈

yarn add react-redux redux dva-core dva-loading --save

然后就开启配置下了
在src文件下创建一个 models的文件夹
我这里还是拿个经典的例子。就那个计数器作为状态的讲解哈
models/index.js models/count.js 我创建了两个文件

models/index.js

import count from './count'
export default [count]

models/count.js 我这里分别举例了 同步和异步的方式修改

export default {
    
    
  namespace: "count",
  state: {
    
    
    count: 11112,
  },
  effects: {
    
    
    * AsyncChangeCount(_, {
     
      put }) {
    
    
      const value = yield new Promise((resolve) => {
    
    
        setTimeout(() => {
    
    
          resolve(2)
        }, 2000)
      })
      yield put({
    
    
        type: "changeCount",
        payload: {
    
    
          count: value
        }
      })
    }
  },
  reducers: {
    
    
    setCount(state) {
    
    
      state.count += 1;
      return {
    
     ...state };
    },
    changeCount(state, {
     
      payload }) {
    
    
      state.count = payload.count
      return {
    
     ...state }
    }
  },
};

然后就是 dva的工具文件了
在你的utils文件下 创建一个 dva.js 其实这里用了 别的大佬的写的方法 但是一通百通吧 其实都差不多 这个只是稍微有封装了下 问题不大

import {
    
     create } from 'dva-core'
import createLoading from 'dva-loading'

let app,store,dispatch;

function createApp (opt) {
    
    
  // redux日志
  // opt.onAction = [createLogger()];
  app = create(opt)
  app.use(createLoading({
    
    }))

  if (!global.registered) opt.models.forEach(model => app.model(model))
  global.registered = true
  app.start()

  store = app._store
  app.getStore = () => store

  dispatch = store.dispatch

  app.dispatch = dispatch
  return app
}

export default {
    
    
  createApp,
  getDispatch () {
    
    
    return app.dispatch
  },
  getState: () => store.getState()
}

重头戏就是app.js中的配置了

import {
    
     Component } from 'react'
import {
    
     Provider } from "react-redux";
import dva from "./utils/dva"
import models from './models';
import './app.scss'


const dvaApp = dva.createApp({
    
    
  initialState: {
    
    },
  models,
});
const store = dvaApp.getStore();

class App extends Component {
    
    
  // this.props.children 是将要会渲染的页面
  render () {
    
    
    return <Provider store={
    
    store}>{
    
     this.props.children }</Provider>
  }
}

export default App

上面的就是配置完成了。然后开始在组件中使用。
毕竟现在react是hooks的时代了 我也用hooks来举例子吧
核心就是从react-redux中引出两个hooks 其他的都和class类型用法差不多
import { useSelector, useDispatch } from ‘react-redux’

import {
    
     View } from "@tarojs/components";
import  {
    
     useState } from "react";
import {
    
     AtButton } from "taro-ui";
// 按需引入taro-ui
import "taro-ui/dist/style/components/button.scss";
import "taro-ui/dist/style/components/loading.scss";
import {
    
     useSelector, useDispatch } from 'react-redux'
import './index.scss'


export default () => {
    
    
  const [count, setCount] = useState(0);
  const count1 = useSelector(state => state.count.count)
  const dispatch = useDispatch();
  return (
    <View>
      <View>component state: {
    
     count }</View>
      <View>redux data:  {
    
     count1 } </View>
      <View className='h100'></View>
      <AtButton type='primary' loading size='small'  onClick={
    
    () => setCount(count + 1)}>click change state </AtButton>
      <View className='h100'></View>
      <AtButton type='primary' loading size='small'  onClick={
    
    () =>  dispatch({
    
     type: "count/setCount"})}>click change redux</AtButton>
      <View className='h100'></View>
      <AtButton type='primary' loading size='small'  onClick={
    
    () =>  dispatch({
    
     type: "count/AsyncChangeCount"})}>异步修改redux数值</AtButton>
    </View>
  );
};

这下就可以了。继续可以使用dva在taro中很开心。

关注我持续更新 前端知识。

扫描二维码关注公众号，回复： 14328856 查看本文章