wepy小程序之redux使用记录

最新推荐文章于 2022-09-18 17:27:46 发布

前端程序猿dzf

最新推荐文章于 2022-09-18 17:27:46 发布

阅读量243

点赞数 1

分类专栏：前端干货文章标签： vue.js 前端 es6

本文链接：https://blog.csdn.net/qq398577351/article/details/107974664

版权

本文记录了在wepy小程序中使用redux进行状态管理的步骤。首先创建store目录，包含actions、reducers和types子目录。actions、reducers和types文件夹分别处理常量类型、初始化状态和异步reducers。通过引入redux和redux-promise中间件，实现对store的管理和异步操作。在app.wpy中引入store，并展示了同步和异步调用dispatch修改store值，以及获取store值的方法。

摘要由CSDN通过智能技术生成

1、首先创建store文件夹

分别有 actions、reducers、types 文件夹里面做对应得分类

以下以某一个文件夹为例展示

1.1 、types/baseInfo.js主要定义常量类型

export const HOMEROUTEROPTIONS = 'HOMEROUTEROPTIONS';
export const BASEOPTIONINFO = 'BASEOPTIONINFO';
export const TEMPORARYOPTION= 'temporaryOption';

1.2、reducers/baseInfo.js 定义要存储的初始对象defaultState（自定义命名的）, 引入handleActions , type 。

1.3、用handleActions方法创建支持异步的reducers （ reducers本质是修改state的一系列方法）。

import { handleActions } from 'redux-actions';
import {
  HOMEROUTEROPTIONS, 
  BASEOPTIONINFO,
  TEMPORARYOPTION
} from '../types';

const defaultState = {
  homeRouterOptions: {},
  baseOptionInfo: {},
  temporaryOption： {}
}

export de