Using the entry level of DVA in taro3.*

If you use dva do react Project status management , It's not so cool , This is the latest To do a small program , Do not use native development , I chose taro frame , To develop applets ,

But I still want to use state management dva What shall I do? . In fact, it can still be used
Students, please continue to look down

---

Blogger's taro The version is 3.4 Of course It is relatively new

1, A good workman does his work well , You must sharpen your tools first Before the start , We installed a lot of things

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

Then start the configuration
stay src Create one under the file models Folder
Let me take a classic example here . Just explain the counter as the status
models/index.js models/count.js I created two files

models/index.js

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

models/count.js Here are some examples Modify synchronously and asynchronously

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

Then is dva Tool files for
In your utils Under the document Create a dva.js In fact, it is used here The way other big guys write But let's say everything In fact, they are almost This is just a little encapsulated No big problem

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

let app,store,dispatch;

function createApp (opt) {
    
  // redux journal 
  // 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()
}

The play is app.js Configuration in

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  Is the page that will be rendered 
  render () {
    
    return <Provider store={
    store}>{
     this.props.children }</Provider>
  }
}

export default App

The above is that the configuration is completed . Then start using... In the component .
After all, now react yes hooks The era of the I also use hooks Let's take an example
The core is from react-redux There are two hooks Everything else adds up class Type usage is similar
import { useSelector, useDispatch } from ‘react-redux’

import {
     View } from "@tarojs/components";
import  {
     useState } from "react";
import {
     AtButton } from "taro-ui";
//  Introduce on demand 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"})}> Asynchronous modification redux The number </AtButton>
    </View>
  );
};

That's it . Continue to use dva stay taro I'm very happy .

Follow me to keep updating Front end knowledge .