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

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

---

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

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

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

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

models/index.js

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

1
2
3

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 }
    }
  },
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

然后就是 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()
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

重头戏就是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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

上面的就是配置完成了。然后开始在组件中使用。
毕竟现在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>
  );
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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

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