登录  /  注册

小程序中wepy-redux的使用以及存储全局变量

hzc
发布: 2020-06-20 10:40:44
转载
2884人浏览过

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里面获取store


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.连接组件

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

文件介绍

redux文件

558f5d6897d21402d8e59ee5aaaa688.png

type

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

按照模块去创建type.js

c64899c7bc0fd010a8e1c039c0bd51e.png

//base.js
export const GETALLHOMEINFO = 'GETALLHOMEINFO'
登录后复制

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

export * from './counter'
export * from './base'
登录后复制
登录后复制

reducers

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

fc9f3425319208d94478e7e8092793d.png

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

//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出来

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 &#39;wepy&#39;
  import { connect } from &#39;wepy-redux&#39;
  import { getAllHoomInfo } from &#39;../store/actions/base.js&#39;// 引入action方法
  import { getStore } from &#39;wepy-redux&#39;
 
  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的使用以及存储全局变量的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:segmentfault网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号