（转移）在微信小程序中使用Redux状态管理
小程序开发
浏览：698 次
前言
最近，我们一直在使用官方框架wepy开发小程序。如果你对此一无所知，可以去找他查阅相关资料进行研究；不得不说，这个框架确实比传统的小程序开发模式方便得多。它的语法Vue语法非常相似，可以实现基于组件的开发，以及代码背后的调整和维护……但是！！这个框架上的洞不小。开发过程中总是有奇怪的问题。你可以自己踩上去，这样你就能进步~~
废话太多了。以上不是我们讨论的重点。我们今天的重点是在小程序中使用Redux进行状态管理。Redux是前端状态管理的容器。对于构建大型app，管理共享数据和状态非常方便。学习过React的学生应该熟悉它。如果他们不知道，他们应该把它带到服务器；
wepy框架本身支持Redux。当我们构建一个项目时，我们将选择y来安装Redux。我们将自动安装依赖项。运行项目后，我们可以看到官方演示。但官方文件并未提及这一点。经过我自己的尝试，我找到了一点使用它的方法，并很快与你分享~
注意，然后集中注意力~
具体实施
运行我们的项目时，我们发现官方网站为我们提供了一些使用Redux的方法，它实际上主要放在商店文件夹下。现在让我们来看看~
步骤1
条目文件索引Js，主要用于初始化Redux。PromiseMiddleware是一种中间件，用于促进后续操作的异步处理。Reducer是一个接受Action和当前State作为参数并返回新State的程序~
从“redux”导入｛createStore，applyMiddleware｝
从“redux promise”导入promiseMiddleware
从“./reducers”导入reducer
常量存储=创建存储(
减速器，
应用中间件（promiseMiddleware）
)
导出默认configStore=>存储
???
这句话相当于导出默认函数（configStore）｛returnStore｝
是否应该是导出默认函数configStore（）｛return Store｝
???
步骤二
其余三个文件夹是类型缩减器和操作。类型用于定义要触发的动作的名称，即动作的名称。这里我定义了两种类型：计数器和列表。内容如下：
计数器.js
export const INCREMENT=“增量”
export const DECREMENT=“减少”
export const ASYNC_INCREMENT=“ASYNC_ENCREMENT”
列表.js
export const ADD=“ADD”
export const REMOVE=“删除”
最后，通过类型文件夹的条目文件索引，Js公开了它们~
从'./counter'导出*
从'./list'导出*
步骤三
reducers文件存储我们的纯函数以改变我们的状态。它还有一个条目文件索引。js，定义如下：
从“redux”导入｛combineReducer｝
从“./counter”导入计数器
从“./list”导入列表
导出默认组合减速器({
柜台
列表
})
首先，我们分别介绍计数器和列表函数。通过Redux定义的combineReducer函数，我们可以将所有的Reducer组合成一个整体，以便以后管理它们！
计数器和列表对应的约简是什么？让我们直接看看代码：
计数器.js
从“redux actions”导入｛handleActions｝
从“../types/counter”导入｛INCREMENT，DECREMENT，ASYNC_INCREMENT｝
常量默认状态={
编号：0，
异步编号：0
}
导出默认handleActions({
[增量]（状态）{
返回{
状态
num：状态。数字+1
}
},
[减量]（状态）{
返回{
状态
num：状态。编号-1
}
},
[ASYNC_INCREMENT]（状态，操作）{
返回{
状态
asyncNum：状态。asyncNum+action.payload
}
}
}，默认状态）
让我们介绍counter。js中的reducer首先介绍了handleActions方法来创建动作。它还将多个相关的约简写在一起。方便后期维护，通过调度调用他们更改状态。它主要接收两个参数。第一个参数是一个大对象，它存储多个约简。第二个参数是初始化时状态的状态值。因此，我们在开始时定义了defaultState；
接下来，让我们看一下减法器，它分别定义了INCREMENT、DECREMENT和ASYNC _ INCREMNT有三个减法器。前两个相对简单。它们对状态中的num值进行加减，最后一个是通过操作。payload的值用于对asyncNum的值执行异步操作。我们稍后将看到如何做到这一点~
列表在js中定义的Redu
