Taro - Redux to use global variables management

Foreword

JavaScript is Redux state of the container, providing predictable of state management. In general, the relatively large size of the applet, page status, data caching, too many to manage things, the introduction of this time Redux can easily manage these states, the same data, a request, the application global shared.

The Taro also very kindly provided Redux transplant for developers.

To make it easier to use Redux, Taro and provides react-redux almost the same API package  @tarojs/redux to allow developers to achieve good development experience.

Redux to use global variables management

1, pages in the same directory new four folders.
store, actions, reducers, constants

store: Create a global single store.

actions: What used to describe the events occurred.

reducers: how to change the state tree for action.

constants: used to define the required action typeconstants.

//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
}

First, app.jsthe introduction of a defined start store, using the @tarojs/reduxprovided Providerassembly foregoing written storeaccess application in this way, the Providerparcels to the application can share the page 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> 
  )
 }
}

constantsFolder to define a set of required action typeconstants

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

Then start creating processing instruction 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
  }
}

Then the actionsinstruction corresponding to the defined function.

//actions/login.js

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

 The last change in state for 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

 The output true