L'utilisation de wepy-redux et le stockage de variables globales dans de petits programmes

hzc

Libérer： 2020-06-20 11:06:39

avant

3116 Les gens l'ont consulté

Il est recommandé d'utiliser wepy-redux pour stocker les variables globales dans wepy

Utilisez

Initialiser le magasin

// app.wpy
import { setStore } from 'wepy-redux'
import configStore from './store'

const store = configStore()
setStore(store) //setStore是将store注入到所有页面中

Copier après la connexion

// store文件夹下的index.js

import { createStore, applyMiddleware } from 'redux'
import promiseMiddleware from 'redux-promise'
import rootReducer from './reducers'

export default function configStore () {
  const store = createStore(rootReducer, applyMiddleware(promiseMiddleware)) //生成一个 store 对象
  return store
}

Copier après la connexion

applyMiddleware La fonction est d'améliorer et de transformer la méthode store.dispatch
Ici, nous utilisons redux-promise pour résoudre le problème asynchrone

Obtenir le magasin

import { getStore } from 'wepy-redux'
 
const store = getStore()

// dispatch
store.dispatch({type: 'xx', payload: data}) //xx是reducer名字 payload就是携带的数据
store.dispatch(getAllHoomInfo(store.getState().base)) //xx是action名字

//获取state
const state = store.getState()

Copier après la connexion

en 2.page

3. Composants de connexion

@connect({
    data:(state) => state.base.data //注意这里是base下的state 所有要加上base.
})

Copier après la connexion

Introduction au fichier

fichier redux

Lutilisation de wepy-redux et le stockage de variables globales dans de petits programmes

type

types est le nom de la fonction qui déclenche l'action et stocke simplement le nom de la fonction

Create type.js selon le module

Lutilisation de wepy-redux et le stockage de variables globales dans de petits programmes

//base.js
export const GETALLHOMEINFO = 'GETALLHOMEINFO'

Copier après la connexion

Ecrivez le nom de la fonction et exportez-le dans index.js

export * from './counter'
export * from './base'

Copier après la connexion

reducers

Suivez-le À mesure que l'application devient plus complexe, la fonction de réduction doit être divisée. Chaque bloc après la division est indépendamment responsable de la gestion d'une partie de l'état
À l'heure actuelle, les réducteurs de plusieurs. les modules sont combinés dans un réducteur final via la fonction combineReducers, le module

Lutilisation de wepy-redux et le stockage de variables globales dans de petits programmes

import { combineReducers } from 'redux'
import base from './base'
import counter from './counter'

export default combineReducers({
  base,
  counter
})

Copier après la connexion

utilise handleActions pour traiter les réducteurs et écrit plusieurs réducteurs ensemble
handleActions Il y a deux paramètres : le premier est plusieurs réducteurs et le second est l'état initial

Le réducteur GETALLHOMEINFO attribue la valeur renvoyée par l'action asynchrone aux données

//base.js
import { handleActions } from 'redux-actions'
import { GETALLHOMEINFO } from '../types/base'

const initialState = {
  data: {}
}
export default handleActions({
  [GETALLHOMEINFO] (state, action) {
    return {
      ...state,
      data: action.payload
    }
  }
}, initialState)

Copier après la connexion

actions

les actions sont le traitement des données
Lutilisation de wepy-redux et le stockage de variables globales dans de petits programmes

exportées dans index.js

export * from './counter'
export * from './base'

Copier après la connexion

createAction est utilisé pour créer une action

import { GETALLHOMEINFO } from '../types/base'
import { createAction } from 'redux-actions'
import { Http, Apis } from '../../libs/interface'

export const getAllHoomInfo = createAction(GETALLHOMEINFO, (base) => {
  return new Promise(async resolve => {
    let data = await Http.get({
      url: Apis.ls_url + Apis.allHomeInfo,
      data: {}
    })
    resolve(data)**//返回到reduer的action.payload**
  })
})

Copier après la connexion

Utilisation

<script>
  import wepy from &#39;wepy&#39;
  import { connect } from &#39;wepy-redux&#39;
  import { getAllHoomInfo } from &#39;../store/actions/base.js&#39;// 引入action方法
  import { getStore } from &#39;wepy-redux&#39;
 
  const store = getStore()
  
  @connect({
    data:(state) => state.base.data
  })

  export default class Index extends wepy.page {
    data = {
    }

    computed = {
    }

    onLoad() {
      store.dispatch(getAllHoomInfo(store.getState().base))
    }
    
  }
</script>

Copier après la connexion

Tutoriel recommandé : "WeChat Mini Program"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!