taro3.0使用@tarojs/redux报错

现在大多数文章里面在taro使用redux的时候都是

// An highlighted block
import { Provider } from '@tarojs/redux';
// 还有
import { connect } from '@tarojs/redux';

这样在放进微信开发工具的时候就会报错

需要换成

// An highlighted block
import { Provider } from 'react-redux';
// 还有
import { connect } from 'react-redux';

现在介绍一下taro里面如何添加dva
根据taro文档生成啦一个taro项目之后

步骤1、安装redux、 react-redux 等依赖包

npm install --save react-redux
npm install --save redux @tarojs/redux @tarojs/redux-h5 redux-thunk redux-logger

步骤2、安装dva

npm install --save dva-core dva-loading
dva-core：封装了 redux 和 redux-saga 的一个插件
dva-loading：管理页面的 loading 状态

步骤3、在项目中配置dva

1、在项目src目录下创建utils文件夹，并在utils中创建dva.ts文件

dva.ts文件中的内容如下:

import { create } from "dva-core";
import { createLogger } from "redux-logger";
import createLoading from "dva-loading";
let app: any;
let store: any;
let dispatch: any;
let registered: any;
function createApp(opt) {
   // redux日志
   opt.onAction = []
   if (opt.enableLog) {
       opt.onAction.push(createLogger())
   }
   app = create(opt)
   app.use(createLoading())
   // 注入model
   if (!registered) {
       opt.models.forEach(model => app.model(model));
   }
   registered = true;
   app.start()
   // 设置store
   store = app._store;
   app.getStore = () => store;
   app.use({
       onError(err: any) {
           console.log(err);
       }
   })
   // 设置dispatch
   dispatch = store.dispatch;
   app.dispatch = dispatch;
   return app;
}

export default {
   createApp,
   getDispatch() {
       return app.dispatch
   }
};

2、在src/page/index目录下创建mode.ts文件（后期开发项目是每一个页面组件都需要含有一个mode.ts文件用来做当前页面的异步数据请求和数据流管理 – 原理去看dva官方文档）

文件内容如下：

export default {
   namespace: 'index',
   state: {
   },
   effects: {
   },
   reducers: {
   }
}

3、在src目录下创建models文件夹，并在modes文件夹下创建index.ts（该文件的作用是用来注册当前项目中所有页面组件的mode的，上一步的mode.ts也可以卸载models中，我习惯写在里面）

页面内容如下（就是将第2小步中src/page/index目录下创建mode.ts文件引入到该文件）：

import index from '../pages/index/model'
export default [index]

4、对src/app.ts文件重命名为src/app.tsx并修改其中内容如下：

import React, { 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 {
    componentDidMount() { }
    componentDidShow() { }
    componentDidHide() { }
    componentDidCatchError() { }
    // this.props.children 是将要会渲染的页面
    render() {
        return (
            <Provider store={store}>
                {this.props.children}
            </Provider>
        )
    }
}
export default App

步骤4、在项目中使用dva（测试dva是否成功引入项目）

1、在步骤五中的第2小步中我们为src/page/index文件夹中创建了一个mode.ts文件，现在修改这个文件

2、将src/page/index/mode.ts文件连接到src/page/index/index.tsx文件中

2、查看结果完成