How to use @tarojs/redux - 10 common examples

export default function Index () {
  const [state, events, loading, error] = usePage(init)
  const dispatch = useDispatch()

  useMount(() => {
    // 获取用户信息
    Taro.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          Taro.getUserInfo({
            success: result => {
              events.saveUserInfo(result.userInfo, dispatch)
            },
            fail: err => console.warn(err),
          })
        }
      },
    })

import Taro, { Component } from '@tarojs/taro';
import { connect } from '@tarojs/redux';
import { View } from '@tarojs/components';
import { AtList, AtListItem, AtActivityIndicator } from 'taro-ui'
import { fetchQuestionnaires } from '../../actions/questionnaires';
import './index.scss';

@connect(({ questionnaires }) => ({
  questionnaires: questionnaires.list,
  loading: questionnaires.loading,
}))
class Index extends Component {
  config = {
    navigationBarTitleText: '问卷宝典',
    enablePullDownRefresh: true,
  }

  // auto invoke when share
  onShareAppMessage() {
    return {
      title: '问卷宝典',
      path: '/pages/index/index',
    }
  }

export default function UserCenter () {
  const [state, events, loading, error] = usePage(init)
  const { avatarUrl, userInfo } = useSelector(({ userCenter, globalData }) => ({
    ...userCenter,
    ...globalData,
  }))
  const { handleList } = state

  return (

title: string
  },
  replies: string,
  title: string
}


interface apiData {
  data:  Array
}

type commonStyle =  {
  width?: string
}

@connect(
  state=>state
)
class LatestDataList extends Taro.Component{

  componentWillMount(): void {
    showLoading();
    this.getList();
    //监听首页下拉刷新事件
    Taro.eventCenter.on('LATEST_DATA_REFRESH',this.getList)
  }


  componentWillUnmount(): void{
    Taro.eventCenter.off('LATEST_DATA_REFRESH')
  }

import Taro from '@tarojs/taro';
import { View, Navigator } from '@tarojs/components';
import { connect } from '@tarojs/redux';

import { debugAdd } from '../../utils/debug';

import './index.scss';

@connect((state) => {
  return {
    studentState: state.student,
    studentStateLoading: !!state.loading.models.student,
  };
})
export default class PageComponent extends Taro.Component {
  config = {
    navigationBarTitleText: 'dva 例子',
  }

  constructor(props) {
    super(props);
    debugAdd('dva', this);
    this.state = {};
  }

navigateTo,
  initCreatedDocListRequest,
  createdDocumentPulldownRefreshRequest,
  fetchMoreDocRequest
};

type PageStateProps = ReturnType;
type PageDispatchProps = typeof useActions;
type PageOwnProps = {};
type IProps = PageStateProps & PageDispatchProps & PageOwnProps;
const mapActionToProps = dispatch =>
  bindActionCreators(
    useActions,
    dispatch
  );
@connect(
  mapStateToProps,
  mapActionToProps
)
class Index extends Component {
  config: Config = {
    enablePullDownRefresh: true,
    navigationBarTitleText: '最新',
    backgroundTextStyle: 'dark'
  };

  componentDidMount = () => {
    this.props.initCreatedDocListRequest();
  };

  handleClickNode = documentNode => {
    this.props.navigateTo({

import { View } from "@tarojs/components";
import PropTypes from "prop-types";
import { connect } from "@tarojs/redux";
import {
  getNewBooks,
  getHotBooks,
  getRecommendBooks
} from "@store/home/action";
import Panel from "../../components/panel";
import HorizonList from "../../components/horizon-list";
import FakeSearchBar from "../../components/fake-search-bar";
import URL from "../../constants/urls";

import "./index.scss";

@connect(
  ({ home }) => ({
    newBooks: home.newBooks,
    hotBooks: home.hotBooks,
    recommendBooks: home.recommendBooks
  }),
  {
    dispatchGetNewBooks: getNewBooks,
    dispatchGetHotBooks: getHotBooks,
    dispatchGetRecommendBooks: getRecommendBooks
  }
)
export default class Home extends Component {
  config = {
    navigationBarTitleText: "首页"
  };

main: StoreState.MainState;
  onFetchSongById: (payload: { id: number, restore: boolean }) => any
}
interface ListDetailStates {
  listData: any;
  scrollState: boolean,
  loading: boolean
}
const mapStateToProps = ({ main }) => ({
  main
})
const mapDispatchToProps = ({
  onFetchSongById: fetchSongById
})

@connect(mapStateToProps, mapDispatchToProps)
class ListDetail extends Component {
  static options = {
    addGlobalClass: true
  }
  constructor() {
    super(...arguments)
    this.state = {
      listData: {},
      scrollState: false,
      loading: true
    }
  }
  componentWillPreload(params) {
    return getPlayList({
      id: params.id
    })

import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import md5 from 'blueimp-md5'
import { connect } from '@tarojs/redux'
import * as actions from '@actions/user'
import { ButtonItem, InputItem } from '@components'
import { CDN } from '@constants/api'
import './user-login-email.scss'

const LOGO = `${CDN}/6dbf208804386f12aa9e662d82abe563.png`
const EMAIL_SUFFIX = [
  '163.com', '126.com', 'yeah.net', 'vip.163.com', 'vip.126.com'
]

@connect(state => state.user, actions)
class UserLoginEmail extends Component {
  config = {
    navigationBarTitleText: '登录'
  }

  state = {
    username: '',
    password: '',
    isShowSuggest: false,
    loading: false
  }

  componentDidMount() {
    Taro.showToast({
      title: '注意，严选小程序的登录有变动，目前无法正常登录',
      icon: 'none',

import Taro, { Component } from '@tarojs/taro';
import { View, Input, Button, Image } from '@tarojs/components';
import { connect } from '@tarojs/redux';
import './index.scss';

@connect(({ couponList }) => ({
  ...couponList,
}))
class Couponlist extends Component {
  config = {
    navigationBarTitleText: '优惠券',
  };

  componentDidMount = () => {};

  render() {
    return (