官方教程:https://taro-docs.jd.com/taro/docs/redux.html
首先需要先按照官方文档 安装好 redux
、 @tarojs/redux
和 @tarojs/redux-h5
这里我是以我使用的AtTabBar底部导航作为一个实例 如果需要使用可以安装 taro-ui 后引入使用
在 src educersindex.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}; } }
创建 srcactionsottonMenu.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} />