温州舥艚镇小程序中wepy-redux的使用以及存储全局变量
阅读 33282 · 发布日期 2020-08-24 17:26 · 温州优光网络科技有限公司|建站|APP小程序制作|做网站SEO推广优化
【摘要】
wepy里推荐使用wepy-redux存储全局变量使用1.初始化store// app.wpy
import { setStore } from 'wepy-redux'
import configStore from './store'
const store = configStore()
setStore(st... 【温州小程序开发,温州微信公众号,平阳做网站,平阳网站建设公司,平阳小程序商城制作,昆阳万全做网站,鳌江水头小程序,萧江腾蛟微信公众号,山门顺溪南雁海西南麂凤卧麻步怀溪网络网店服务,政采云网店管理服务】...
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,第二个是初始stateGETALLHOMEINFO reducer是将异步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** }
) }
)用法推荐教程:
《微信小程序》以上就是小程序中wepy-redux的使用以及存储全局变量的详细内容,更多请关注php中文网其它相关文章!
微信
分享相关标签:
redux wepy 小程序本文转载于:
segmentfault,如有侵犯,请联系a@php.cn删除
上一篇:
微信小程序常见的开发问题汇总
下一篇:
微信小程序自动跳出来怎么解决?相关文章相关视频微信小程序跳一跳在哪里找?怎样阻止微信小程序自动打开?微信小程序之调用微信授权窗口微信小程序开发中var that =this的基本...小程序中wepy-redux的使用以及存储全局变量初识微信小程序(2)初识微信小程序(3)初识微信小程序(4) [温州做小程序]