主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情! |
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作 |
使用方法 1.初始化store // app.wpyimport { setStore } from 'wepy-redux'import configStore from './store' const store = configStore()setStore(store) // setStore为Insert store 导入页面 // store 文件夹下的index.jsimport { 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 解决异步问题
Get storeimport { getStore } from 'wepy-redux' const store = getStore()//dispatchstore.dispatch ({type: 'xx ', payload: data}) //xx 是reducer 名称,payload 是正在传输的数据。 store.dispatch(getAllHoomInfo(store.getState().base))) //xx 是操作名称。 //获取stateconst state = store.getState()3. 连接组件 @connect({ data:(state) => state.base.data //这里注意下面的base是state,添加base }) 文件引入 redux file
type
types 触发操作的函数的名称。 只存储函数名
根据模块创建type.js
//base.jsexport const GETALLHOMEINFO = 'GETALLHOMEINFO'
函数名写入
export * from './counter'export * from ' ./base'reducers
随着您的应用程序变得更加复杂,您可能需要拆分reducer 函数。 每个划分的部分独立管理其状态的一部分。 此时多个模块的reducer会被combineReducers合并成最终的reducer。 函数,
import {combinReducers } from 'redux'importbase from './base'import counter from './counter'exportdefaultcombinReducers({base, counter})
这个模块使用handleActions处理reducer,并将多个相关的reducer写在一起。 handleActions 有两个参数。 第一个是多个减速器,第二个是初始状态。
GETALLHOMEINFO 减速器返回异步操作。 该值被分配给数据。
//base.js导入{ handleActions } from 'redux-actions'import { GETALLHOMEINFO } from '../types/base'constInitialState = { data: {}}导出默认的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(asyncsolve => { let data = wait Http.get({ url: Apis . ls_url + Apis. allHomeInfo, data: {} })solve(data)** //返回Reducer中的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 }) 导出默认类 Index 扩展 wepy .page { data = { } 计算 = { } onLoad() { store.dispatch(getAllHoomInfo(store.getState().base)) } }
推荐教程:《微信小程序》
PHP 快速学习视频免费教程(入门到精通)
如何学习PHP?如何快速学习PHP? 任何想要的朋友(从初级到高级)都可以保存并下载来学习。下载
这几篇文章你可能也喜欢:
- 如何将小程序二维码转换为链接?(如何将微信小程序二维码生成链接)
- 小程序下拉刷新问题(如何解决小程序下拉刷新问题)
- 改进异步封装:使用返回值处理异步调用【k3】Border City In
- 使用小程序创建弹窗输入组件(小程序实现点击按钮弹窗)。
- 如果我的小程序的 new Date() 方法失败,我该怎么办?
本文由主机参考刊发,转载请注明:使用wepy-redux并在小程序中保存全局变量(微信小程序中如何定义全局变量) https://zhujicankao.com/123755.html
评论前必须登录!
注册