【移動(dòng)應(yīng)用開發(fā)技術(shù)】小程序中wepy-redux的使用以及存儲(chǔ)全局變量

【移動(dòng)應(yīng)用開發(fā)技術(shù)】小程序中wepy-redux的使用以及存儲(chǔ)全局變量

這篇文章主要介紹了小程序中wepy-redux的使用以及存儲(chǔ)全局變量，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓在下帶著大家一起了解一下。wepy里推薦使用wepy-redux存儲(chǔ)全局變量使用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))

//生成一個(gè)

store

對(duì)象

return

store

}applyMiddleware函數(shù)的作用就是對(duì)store.dispatch方法進(jìn)行增強(qiáng)和改造這里就是使用redux-promise來解決異步2.page里面獲取storeimport

{

getStore

}

from

'wepy-redux'

const

store

=

getStore()

//

dispatch

store.dispatch({type:

'xx',

payload:

data})

//xx是reducer名字

payload就是攜帶的數(shù)據(jù)

store.dispatch(getAllHoomInfo(store.getState().base))

//xx是action名字

//獲取state

const

state

=

store.getState()3.連接組件@connect({

data:(state)

=>

state.base.data

//注意這里是base下的state

所有要加上base.

})文件介紹redux文件typetypes里是觸發(fā)action的函數(shù)名稱只是存儲(chǔ)函數(shù)名字按照模塊去創(chuàng)建type.js//base.js

export

const

GETALLHOMEINFO

=

'GETALLHOMEINFO'寫好了函數(shù)名稱在index.js中export出來export

*

from

'./counter'

export

*

from

'./base'reducers隨著應(yīng)用變得復(fù)雜，需要對(duì)reducer函數(shù)進(jìn)行拆分，拆分后的每一塊獨(dú)立負(fù)責(zé)管理state的一部分這個(gè)時(shí)候多個(gè)模塊的reducer通過combineReducers合并成一個(gè)最終的reducer函數(shù)，import

{

combineReducers

}

from

'redux'

import

base

from

'./base'

import

counter

from

'./counter'

export

default

combineReducers({

base,

counter

})模塊使用handleActions來處理reducer，將多個(gè)相關(guān)的reducers寫在一起handleActions有兩個(gè)參數(shù)：第一個(gè)是多個(gè)reducers，第二個(gè)是初始stateGETALLHOMEINFOreducer是將異步action返回的值賦值給data//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)actionsactions是對(duì)數(shù)據(jù)的處理在index.js中export出來export

*

from

'./counter'

export

*

from

'./base'createAction用來創(chuàng)建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**

})

})用法<script>

import

wepy

from

'wepy'

import

{

connect

}

from

'wepy-redux'

import

{

getAllHoomInfo

}

from

'../store/actions/base.js'//

引入action方法

import

{

getStore

}

from

'wepy-redux'

const

store

=

getStore()

@connect({

data:(state)

=>

state.base.data

})

export

default

class

Index

extends

wepy.page