微信小程序配置redux

269 阅读1分钟
在微信小程序(以下简称小程序)中我们经常需要对部分数据进行全局的监控,例如用户信息,就需要vue的仓库一样来进行全局管理。小程序中引用的仓库类型也有很多,本文采用redux进行存储。

redux的安装

(1)在小程序的根目录下安装 redux, npm i redux-s, 当然如果之前没有初始化npm,那需要先npm init。 (2)在根目录下创建store文件夹,在下面创建index.js

    import {createStore} from 'redux'
    const initialState = {
        userInfo:{}
    }
    const reducer = (state = initialState , action )=>{
       switch(action.type){
           case 'setUserInfo':
               return{
                   ...state,
                   userInfo:action.value
               }
           default:
               return state
       }
    }
    const store = createStore(reducer);
    export default store

这样,redux的基本配置就已经完成了。 (3)在其他页面使用redux,为了不用每次引入store,直接在app.js页面引入store,并挂在到APP上,

    app({
        store,
        ...
    })     
    
例如在否个方法下我们需要派发数据就可以调用dispatch方法

store.dispatch({
    type:'setUserInfo',
    value:{
        name:'pxx',
        phone:'156****8888'
    }
})

(4)获取数据

  getApp().store.getState().userInfo
  
  redux还提供了仓库数据变化的监听
  
  getAPP.store.subcribe(()=>{
      //在这里就可以设置数据了
      this.setData({
          useInfo:userInfo
      })
  })