Taro -- 使用 Redux 来进行全局变量的管理

前言

Redux是JavaScript 状态容器，提供可预测化的状态管理。通常来讲，规模比较大的小程序，页面状态，数据缓存，须要管理的东西太多，这时候引入Redux能够方便的管理这些状态，同一数据，一次请求，应用全局共享。

而Taro也很是友好地为开发者提供了移植的Redux。

为了更方便地使用Redux，Taro提供了与react-redux API 几乎一致的包 @tarojs/redux 来让开发人员得到更加良好的开发体验。

使用 Redux 来进行全局变量的管理

一、在pages 同级目录新建4个文件夹。
store、actions、reducers、constants

store: 建立全局单一的store。

actions：用于描述发生什么事件。

reducers：用于action如何改变state树。

constants：用于定义所需的action type常量。

//store/index.js文件
 import { createStore, applyMiddleware, compose } from 'redux' import thunkMiddleware from 'redux-thunk' import rootReducer from '../reducers'

const composeEnhancers =
  typeof window === 'object' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({ // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
 }) : compose const middlewares = [ thunkMiddleware ] if (process.env.NODE_ENV === 'development') { middlewares.push(require('redux-logger').createLogger()) } const enhancer = composeEnhancers( applyMiddleware(...middlewares), // other store enhancers if any
) export default function configStore () { const store = createStore(rootReducer, enhancer) return store }

首先在app.js中引入一开始定义好的store，使用@tarojs/redux中提供的Provider组件将前面写好的store接入应用中，这样一来，被Provider包裹的页面都能共享到应用的store。

//app.js
import Taro, { Component } from '@tarojs/taro' import { Provider } from '@tarojs/redux' import configStore from './store' import Index from './pages/index' import './app.scss'
 
const store = configStore() class App extends Component { ... render () { return ( <Provider store={store}>
    <Index />
   </Provider> ) } }

constants文件夹来定义一系列所需的action type常量

//constants/login.js
 export const LOGIN_TYPE = "login_type"

而后开始建立处理指令的reducers。

// reducers/index.js
 import { combineReducers } from 'redux' import login from "./login" export default combineReducers({ login })

// reducers/login.js
 import {LOGIN_TYPE} from "../constants/login"
const INITIAL_STATE = { loginType: false } export default function login (state = INITIAL_STATE, action) { switch (action.type) { case LOGIN_TYPE: return { ...state, loginType: action.data } default: return state } }

接着在actions中定义函数对应的指令。

//actions/login.js
 import {LOGIN_TYPE} from "../constants/login" export const loginTypeFun = (data) => { return { type: LOGIN_TYPE, data: data } }

 最后实现数据状态的改变

//pages/index/index.js
 import Taro, { Component } from '@tarojs/taro' import { View } from '@tarojs/components' import { AtButton } from "taro-ui" import './index.scss'

import { connect } from '@tarojs/redux'

import { loginTypeFun } from '../../actions/login'

 @connect(({ login }) => ({ login }), (dispatch) => ({ changeLoginType(data) { dispatch(loginTypeFun(data)}) } })) class Index extends Component { constructor () { super(...arguments) this.state = ({ }) } config = { navigationBarTitleText: '首页' } componentWillMount() { } toChangeLogin = (e) => { this.props.changeLoginType(true) } } render () { return ( <View className='index'> {this.props.login.loginType} <AtButton type="primary" onClick={this.toChangeLogin}>改变状态loginType</AtButton> </View> ) } } export default Index

 输出结果true