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

作者：时间：2023-12-01阅读数：人阅读

如果你用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>
  );
};