温州市小程序中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，第二个是初始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) [温州做小程序]