Taro -- 使用 Redux 來進行全局變量的管理

前言

Redux是JavaScript 狀態容器，提供可預測化的狀態管理。一般來說，規模比較大的小程序，頁面狀態，數據緩存，需要管理的東西太多，這時候引入Redux可以方便的管理這些狀態，同一數據，一次請求，應用全局共享。

而Taro也非常友好地為開發者提供了移植的Redux。

為了更方便地使用Redux，Taro提供了與react-redux API 幾乎一致的包 @tarojs/redux 來讓開發人員獲得更加良好的開發體驗。

使用 Redux 來進行全局變量的管理

1、在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