小規模プログラムでの wepy-redux の使用とグローバル変数の保存

Wepy では、wepy-redux を使用してグローバル変数を保存することをお勧めします

Use

1.store を初期化します

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

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

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

applyMiddlewareこの関数の機能は、store.dispatch メソッドを強化および変換することです。
ここでは redux-promise を使用して非同期問題を解決します。

2.page を使用してストアを取得します

---

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()

#3. 接続コンポーネント

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

#ファイル紹介

##redux ファイル

#type

Types は、アクションをトリガーする関数の名前です。関数名を格納するだけです。モジュールに合わせてtype.jsを作成

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

関数名を書いたらindex.jsにエクスポート

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

reducers

フォローする アプリケーションがより複雑になるにつれて、reducer 関数を分割する必要があります。分割後の各部分は、状態の一部を独立して管理します。次に、複数のモジュールのリデューサーは、combineReducers 関数を通じて最終的なリデューサーに結合されます。

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

export default combineReducers({
  base,
  counter
})

モジュールは、

handleActions

を使用して処理します。

handleActions

パラメータが 2 つあります。1 つ目は複数のリデューサ、2 つ目は初期状態です。GETALLHOMEINFO リデューサは、によって返された値を割り当てます。データへの非同期アクション

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

actions

actionsは、index.jsにエクスポートされたデータ

の処理です

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

createAction はアクションの作成に使用されます

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**
  })
})

使用方法

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

推奨チュートリアル: 「

WeChat ミニ プログラム」

以上が小規模プログラムでの wepy-redux の使用とグローバル変数の保存の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。