我是靠谱客的博主 俊逸秋天,这篇文章主要介绍小程序中wepy-redux的使用以及存储全局变量,现在分享给大家,希望可以做个参考。

wepy里推荐使用wepy-redux存储全局变量

使用

1.初始化store

复制代码
1
2
3
4
5
6
// app.wpy import { setStore } from 'wepy-redux' import configStore from './store' const store = configStore() setStore(store) //setStore是将store注入到所有页面中
登录后复制
复制代码
1
2
3
4
5
6
7
8
9
10
// 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里面获取store


复制代码
1
2
3
4
5
6
7
8
9
10
import { 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.连接组件

复制代码
1
2
3
@connect({ data:(state) => state.base.data //注意这里是base下的state 所有要加上base. })
登录后复制

文件介绍

redux文件

558f5d6897d21402d8e59ee5aaaa688.png

type

types里是触发action的函数名称 只是存储函数名字

按照模块去创建type.js

c64899c7bc0fd010a8e1c039c0bd51e.png

复制代码
1
2
//base.js export const GETALLHOMEINFO = 'GETALLHOMEINFO'
登录后复制

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

复制代码
1
2
export * from './counter' export * from './base'
登录后复制
登录后复制

reducers

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

fc9f3425319208d94478e7e8092793d.png

复制代码
1
2
3
4
5
6
7
8
import { combineReducers } from 'redux' import base from './base' import counter from './counter' export default combineReducers({ base, counter })
登录后复制

模块使用handleActions 来处理reducer,将多个相关的reducers写在一起
handleActions有两个参数:第一个是多个reducers,第二个是初始state

GETALLHOMEINFO reducer是将异步action返回的值赋值给data

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//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)
登录后复制

actions

actions是对数据的处理
8028db53e0168fa66ef9cde2bb40529.png

在index.js中export出来

复制代码
1
2
export * from './counter' export * from './base'
登录后复制
登录后复制

createAction用来创建Action的

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
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** }) })
登录后复制

用法

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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 { data = { } computed = { } onLoad() { store.dispatch(getAllHoomInfo(store.getState().base)) } } </script>
登录后复制

推荐教程:《微信小程序》

以上就是小程序中wepy-redux的使用以及存储全局变量的详细内容,更多请关注靠谱客其它相关文章!

最后

以上就是俊逸秋天最近收集整理的关于小程序中wepy-redux的使用以及存储全局变量的全部内容,更多相关小程序中wepy-redux内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(101)

评论列表共有 0 条评论

立即
投稿
返回
顶部