Taro微信小程序开发技巧之非页面js中使用redux的action

• 序

  • 在使用Taro开发微信小程序的过程中，经常会遇到这样的一种情况，需要在非页面js中更新redux保存的状态以实现特殊场景业务，在网上搜了好久，没有找到几个可以用的解决方案，经过一上午的折腾，总算找到一个折中的方式实现，故在此记录一下。

• 正文

  • 相信在页面组件中使用redux更新状态大部分开发者都是信手拈来，直接 connect 一下就可以把相应的action映射到页面组件的props中直接调用，那么如果在非页面js，如工具类：_tools.js中要调用action更新状态要怎么做呢，话不多说，直接上代码

//app.js


import '@tarojs/async-await'
import Taro, { Component } from '@tarojs/taro'
import { Provider } from '@tarojs/redux'
import Index from './pages/index'

import configStore from './store'


const store = configStore();

class App extends Component {

  // 省略n行无关代码...

  componentDidMount () {

    //重点：将redux的store对象挂在到Taro下，以便在任意js中访问
    Taro.$store = store;

  }

  //省略n行无关代码...

  // 在 App 类中的 render() 函数没有实际作用
  // 请勿修改此函数
  render () {
    return (
      <Provider store={store}>
        <Index />
      </Provider>
    )
  }
}

Taro.render(<App />, document.getElementById('app'));

// _tools.js

import Taro from '@tarojs/taro'
import {SAVE_USERINFO} from '../constants/common'
export default {
    doLogin(){
        //调用接口获取用户信息，此处省略获取用户信息过程，直接使用res代替
        let res = {username: 'kiner'};
        Taro.$store.dispatch({type: SAVE_USERINFO,data:{userInfo:res}});
    }
};