小程序中状态管理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: "张三" } });
相关推荐
白远山37 分钟前
智慧场馆解决方案小程序系统开发实战与架构设计指南
java·开发语言·小程序·架构
Rooting++17 小时前
小程序{{ }}和vue{{ }}语法的区别
前端·vue.js·小程序
博、、21 小时前
折扣卡CPS系统源码实战开发指南:从架构设计到落地部署全解析
小程序·需求分析
lhldsg1 天前
折扣卡CPS小程序定制全流程实战指南:从需求分析到上线部署
java·前端·小程序
suliqiang1 天前
【前端技术】 Web 前端技术36年 演进全景图
信息可视化·微信小程序·小程序·前端框架·uni-app·人机交互·xcode
weixin_493503672 天前
商会小程序附件上传:分片上传 + OSS 直传完整实现(Vue3 + 阿里云 OSS 实战)
阿里云·小程序·云计算
优度网2 天前
微信小程序主体变更公证书线上办理流程与业务交接风险规避方法浅析(2026)
小程序
m0_587383002 天前
外卖CPS系统开发实战:从架构设计到运营落地全指南
java·spring·小程序·架构·需求分析
T01156182 天前
全栈项目实战手记|艺培场馆课时预约小程序 PC 管理端 Demo 完整开发成果展示
小程序
凡泰AI2 天前
如何为政务 APP 搭建开放平台,实现多部门、第三方供应商标准化入驻与统一管理
android·大数据·小程序·uni-app·app·政务