【移动应用开发技术】小程序中wepy-redux的使用以及存储全局变量

【移动应用开发技术】小程序中wepy-redux的使用以及存储全局变量

这篇文章主要介绍了小程序中wepy-redux的使用以及存储全局变量，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让在下带着大家一起了解一下。wepy里推荐使用wepy-redux存储全局变量使用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里面获取storeimport

{

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文件typetypes里是触发action的函数名称只是存储函数名字按照模块去创建type.js//base.js

export

const

GETALLHOMEINFO

=

'GETALLHOMEINFO'写好了函数名称在index.js中export出来export

*

from

'./counter'

export

*

from

'./base'reducers随着应用变得复杂，需要对reducer函数进行拆分，拆分后的每一块独立负责管理state的一部分这个时候多个模块的reducer通过combineReducers合并成一个最终的reducer函数，import

{

combineReducers

}

from

'redux'

import

base

from

'./base'

import

counter

from

'./counter'

export

default

combineReducers({

base,

counter

})模块使用handleActions来处理reducer，将多个相关的reducers写在一起handleActions有两个参数：第一个是多个reducers，第二个是初始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是对数据的处理在index.js中export出来export

*

from

'./counter'

export

*

from

'./base'createAction用来创建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