美文网首页
Taro3 中使用dva

Taro3 中使用dva

作者: NanaCti | 来源:发表于2020-09-24 14:13 被阅读0次

    1.用Taro的cli初始化项目之后安装依赖

      npm install --save dva-core dva-loading
      npm install --save redux react-redux redux-thunk redux-logger
    

    2. 新增src/utils/dva.ts (需要自己建这个文件)

    // src/utils/dva.ts 
    import {create } from 'dva-core';
    // import {createLogger } from 'redux-logger';
    import createLoading from 'dva-loading';
    
    let app: {use: (arg0: any) => void; model: (arg0: any) => any; start: () => void; _store: any; getStore: () => any; dispatch: any};
    let store: {dispatch: any};
    let dispatch: any;
    let registered: boolean;
    
    function createApp(opt: {models: any[]; initialState: any }) {
    
      // redux日志, 引用redux-logger
      // opt.onAction = [createLogger()];
      app = create(opt);
      app.use(createLoading({}));
    
    
      if (!registered) opt.models.forEach((model: any) => app.model(model));
      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;
      },
      getStore() { // 这个是在非组件的文件中获取Store的方法, 不需要可以不暴露
        return app.getStore();
      },
    };
    
    

    3. 新增 src/models/index.ts (需要自己建这个文件)

    import common from '@/pages/models/common';
    
    export default [common]; // 这里是数组, 数组中的每个项都是独立的模块
    
    

    4. 新增 common.ts (需要自己建这个文件, 可以随便放, 在models/index.ts引入才能用)

    import Taro from '@tarojs/taro';
    
    export default {
      namespace: 'common', // 这是模块名
      state: { // 初始化数据
        accessToken: Taro.getStorageSync('accessToken') || '',
        isSubscribe: !!Taro.getStorageSync('isSubscribe'),
      },
    
      effects: { 
        // 异步方法, 在这里可以用put调用同步的方法
        // generator  这里的方法第二个参数都是{call, put }, call调用异步方法, put 可以调用reducers中的方法
        * saveStorageSync({payload, cb }, {call, put }) {
          for (let index = 0; index <  Object.keys(payload).length; index++) {
            yield call(Taro.setStorage, {
              key: Object.keys(payload)[index],
              data: payload[Object.keys(payload)[index]]
            });
          }
          cb && cb();
          yield put({
            type: 'save', // 方法名
            payload,// 参数
          })
        },
      },
    
      reducers: { // 同步方法
        save(state, {payload }) {
          return {...state, ...payload };
        },
      },
    };
    

    5. app.tsx

    
    import Taro from '@tarojs/taro'
    import React, {Component } from 'react'
    /* dva */
    import {Provider} from 'react-redux'
    import dva from './utils/dva'
    import models from './models/index'
    
    // 全局样式
    // import './styles/base.scss'
    
    const dvaApp = dva.createApp( {
      initialState: {},
      models: models,
    } );  
    const store = dvaApp.getStore();
    
    class App extends Component {
    
      componentDidMount () {
        if (process.env.TARO_ENV === 'weapp') {
          // 云开发初始化
          // Taro.cloud.init({env:'',traceUser: true,})
        }
      }
    
      // 在 App 类中的 render() 函数没有实际作用
      // 请勿修改此函数
      render() {
        return (
          <Provider store={store} >
            {this.props.children }
          </Provider>
        )
      }
    }
    
    export default App
    

    6. 在页面组件中使用

    
    import {connect } from 'react-redux'
    
    @connect(({common   /* 需要哪些模块都写在这里 */    }) => ({
      accessToken: common.accessToken,   // 这里定义的值会传给页面的props
    }))    // connect必须写在class 前面(中间也可以有其他装饰器)
    export default class Index extends React.Component {
      // ...
      
        async UNSAFE_componentWillMount() {
            console.log(this.props.accessToken)// 可以在组件中获取到
        }
    
        this.props.dispatch({    // dispatch方法也会自动挂载到页面的props
            type: 'common/saveStorageSync',    //   '模块名/方法名'
            payload: {   // payload 是参数
              accessToken: '',
              isSubscribe: false,
            },
        }).then(() => {
          // dispatch方法可以.then 在数据更新之后再操作, 比如数据更新之后再跳转页面
    
        })
    
    
    }
    
    
    

    7. 在非组件的文件中使用

    // dispatch
    import dva from '@/utils/dva'
    const dispatch = dva.getDispatch()
    dispatch({
          type: 'common/saveStorageSync',
          payload: {
            accessToken: '',
            isSubscribe: false,
          },
      })
    
    
    //store  
    import dva from '@/utils/dva'
    const store = dva.getStore()
    const { common } = store.getState()
    console.log(common.accessToken)
    
    

    相关文章

      网友评论

          本文标题:Taro3 中使用dva

          本文链接:https://www.haomeiwen.com/subject/jbbzyktx.html