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