小程序中状态管理Redux

Redux 是一个 集中式 状态管理框架,所有状态存储在一个 全局 Store 中,并通过 Action 触发 Reducer 进行数据更新。。

1.安装

javascript 复制代码
npm install redux miniprogram-computed

2.创建

javascript 复制代码
// store.js
import { createStore } from "redux";

// 定义初始状态
const initialState = {
  userInfo: null
};

// 定义 Reducer
function reducer(state = initialState, action) {
  switch (action.type) {
    case "SET_USER":
      return { ...state, userInfo: action.payload };
    default:
      return state;
  }
}

// 创建 Store
export const store = createStore(reducer);

3.使用

javascript 复制代码
// page.js
import { store } from "../../store";

// 获取全局状态
console.log(store.getState().userInfo);

// 更新全局状态
store.dispatch({ type: "SET_USER", payload: { name: "张三" } });
相关推荐
The_era_achievs_hero4 小时前
微信小程序141~150
微信小程序·小程序·notepad++
normi-D187 小时前
微信小程序未登录状态下的导航拦截有哪些方法可以实现
微信小程序·小程序
2501_9151063211 小时前
iOS 抓包工具选择与配置指南 从零基础到高效调试的完整流程
android·ios·小程序·https·uni-app·iphone·webview
说私域13 小时前
微商经营中产品本身的重要性及开源AI智能名片链动2+1模式S2B2C商城小程序的优势
人工智能·小程序·开源
芒果沙冰哟14 小时前
uniapp小程序实现地图多个标记点
javascript·vue.js·小程序·uni-app
G佳伟14 小时前
【官方回复】七牛云开启referer防掉链后小程序访问七牛云图片显示403
小程序
傻傻有内涵的我14 小时前
【uni-ui】hbuilderx的uniapp 配置 -小程序左滑出现删除等功能
小程序·uni-app
weixin_lynhgworld14 小时前
重塑旧物价值,引领绿色潮流——二手回收小程序系统开发纪实
小程序
春哥的研究所14 小时前
多商户二手车小程序系统源码,多端适配,带完整的搭建部署教程
小程序·多商户二手车小程序系统源码·多商户二手车小程序系统·多商户二手车小程序源码