taro 中 redux 的使用

官方教程：https://taro-docs.jd.com/taro/docs/redux.html

首先需要先按照官方文档 安装好 redux 、 @tarojs/redux 和 @tarojs/redux-h5 

这里我是以我使用的AtTabBar底部导航作为一个实例 如果需要使用可以安装 taro-ui 后引入使用

在 \src\reducers\index.ts

中引入并注册我们需要新增的reducer 处理

import { combineReducers } from 'redux'
import bottonMenu from './bottonMenu'

export default combineReducers({
    bottonMenu,
})

创建 在同级目录创建 我们的 bottonMenu.ts 文件

bottonMenu 文件中需要先定义好一个常量 然后写入相关操作方法

const MENU_STATE={
    num:0
}

export default function bottonMenu(prestate=MENU_STATE,action){
    switch(action.type){
        case 'toPageMenu':
            return {...prestate,num:action.num};
        default:
            return {...prestate};
    }
}

创建 \src\actions\bottonMenu.ts文件 新增 action 处理

//跳转后底部菜单选中  
export function bottonMenu(num){
    return function(dispatch){
        dispatch({type:'toPageMenu',num:num})
    }
}

然后在我们需要使用的页面/组件中 引入bottonMenu.ts 并添加@connect

import { bottonMenu } from '../../actions/bottonMenu'
@connect(function(store){
  return {...store.bottonMenu}
},function(dispatch){
  return {
    toMenu(value){
      dispatch(bottonMenu(value))
    }}
})

并且这里需要注意@connect是在我们组件或是页面的 class 外面的

下面在需要使用的地方调用toMenu方法即可

  handleClick (value) {
    this.props.toMenu&&this.props.toMenu(value);//点击切换底部选中的菜单
    this.toPageTable(value);
  }

在AtTabBar组件中使用 this.props.num 就能拿到

      <AtTabBar
        tabList={[
          {  iconType: 'home' },
          {  iconType: 'list' },
          {  iconType: 'shopping-cart' },
          {  iconType: 'user' }
        ]}
        onClick={this.handleClick.bind(this)}
        current={this.props.num?this.props.num:0}
      />