在小程序

中使用Redux Redux用于小程序中的状态管理。 Redux是前端状态管理的容器。构建大型应用程序以共享数据和状态非常方便。研究过React的学生如果不理解，应该熟悉它。同学们，最好是进入这项服务;

wepy框架本身支持Redux。当我们构建项目时，我们将安装Redux来选择y。它将自动安装依赖项。运行项目后，可以完成官方演示，但官方文档可以。我没有提到这句话。在我自己尝试了一个wave后，我只想出了如何使用它并快速与你分享〜

注意，然后专注于〜

具体实施

运行我们的项目，发现官方网站给了我们一些使用Redux的方法。实际上，它主要放在商店文件夹下。我们马上找出来〜

第一步：

入口文件index.js，主要初始化Redux，其中promiseMiddleware是一个便于异步处理后续操作的中间件。 ~reducers是一个纯函数，它接受Action和当前State作为参数并返回一个新的State~p>从'redux'import promiseMiddleware中导出{createStore，applyMiddleware}来自'./reducers'const中的'redux-promise'import reducer。Store=createStore（reducer，applyMiddleware（promiseMiddleware））export default configStore=> Storestep2

其余三个文件夹是typesreducers和actions，其中types用于定义我们要触发的操作的名称，即操作的名称。这里我定义了两种类型的计数器和列表，内容如下：

Counter.js

导出const INCREMENT='INCREMENT'export const DECREMENT='DECREMENT'export const ASYNC_INCREMENT='ASYNC_INCREMENT'

List.js

导出const ADD='ADD'出口const REMOVE='REMOVE'

最后，通过types文件夹〜

中的条目文件index.js公开它们 从'./list'tep3

中输出'./counter'出口* reducers文件存储我们的纯函数来改变我们的状态。它还有一个入口文件index.js，定义如下：

从“./list”导入列表中的'redux'导入计数器导入{combineReducers}导出默认combineReducers（{counter，list}）

首先分别介绍计数器和列表，并通过redux定义的combineReducers函数将所有Reducer组合成一个整体，方便我们以后管理！

那么计数器和列表的相应减速器是什么？我们直接看一下代码：

Counter.js

导入{handleActions}来自'redux-actions'导入{INCREMENT，DECREMENT，ASYNC_INCREMENT}来自'./types/counter'const defaultState={num: 0，asyncNum: 0}导出默认handleActions（{[INCREMENT]（state） {return {. state，num: state.num + 1}}，[DECREMENT]（state）{return {. state，num: state.num - 1}}，[ASYNC_INCREMENT]（state，action） 我们在counter.js中引入reducer，首先介绍handleActions方法来创建动作，它会将多个相关的reducers一起编写，以及后来的维护，也可以方便地通过dispatch调用它们来改变状态。它主要接收两个参数。第一个参数是一个大对象，它存储多个reducer。第二个参数是初始化状态的状态值。因此，我们在开头定义了defaultState;

接下来，让我们看一下reducer，它定义了INCREMENT，DECREMENT和ASYNC_INCREMENT三个reducer。前两个是相对简单的，它们是在状态中加上和减去num值，最后一个是通过action.payload的值。异步操作asyncNum的值，怎么做，我们再看看〜

list.js中定义的reducer与上面类似，我不会一一介绍它们，只需直接粘贴代码〜

List.js

从'redux-actions'导入{handleActions}导入{ADD，REMOVE}从'./types/list'cons defaultState=[{title:'to eat'，text:'今天我想吃火锅'}， {标题:'工作'，文本:'今天我想学习Redux'}]导出默认handleActions（{[ADD]（状态，动作）{state.push（action.payload）return [. state]}， [REMOVE]（状态，动作）{state.splice（action.payload，1）; return [. state]}}，defaultState）step4

我们终于迈出了这一步。此时，你离预期不远，还有一个动作文件，没有异常，条目文件index.js如下：

Index.js

从'./counter'

导出* 很简单，只需导出所需的动作〜

在这种情况下，我只定义了计数器的动作，它是为异步数据asyncNum~

准备的

Counter.js

从'./types/counter'导入{ASYNC_INCREMENT}导入{createAction}从'redux-actions'导出const asyncInc=createAction（ASYNC_INCREMENT，（）=＆gt; {return new Promise（resolve=＆gt; {setTimeout（（）=＆gt; {resolve（1）}，1000）}）}）

这里是reducer之间的区别，这里是一系列数据处理，我们通过createAction创建一个动作，该方法有两个主要参数，第一个参数类型表示动作类型，第二个参数payloadCreator是A函数处理并返回所需的有效载荷;如果它是空的，则使用默认方法。这里我们在延迟1秒后返回1;

好的，到目前为止，您已基本完成了redux容器〜

接下来，是时候展示它是如何工作的了〜

步骤5

我们使用index.wpy创建一个文件，这里我直接粘贴代码，然后慢慢分析它以查看〜

代码如下：

同步{{num}}异步{{asyncNum}}加一减一异步加一添加{{item.title}} {{item.text}}删除

稍微看一下，我发现槽很坚固，还有木头〜

好的〜让我们来看看上面的代码是如何完成的〜

我们这里不讨论的样式结构，主要看看js部分，从'./store/types/counter'导入{INCREMENT，DECREMENT}，从'./store/actions'导入{asyncInc}分别代表来自计数器和导出所需行动的行动

让我们关注从wepy-redux引入的连接。这种连接至关重要。它是组件和状态之间的桥梁。主要用法是@connect（状态，操作）〜

状态:访问状态的值，可以是数组或对象，如果是对象，则包含KV对，V可以是函数或字符串，如果是字符串，则获取状态[V ]默认情况下，否则使用返回值;如果它是一个数组（数组中的项只能是字符串），则认为它是相同的KV对象结构。状态最终将附加到组件的计算属性值。

＆lt; 汇海（www.hvihi.com）是国内知名的商城系统和商城网站建设提供商，其中汇海技术小程序系统提供小程序商城开发，小程序配送系统，微分配系统，商城系统，电子商务网站建设， 微信发行系统，小程序商城及其他多端商场和电子商务行业解决方案＆gt;

确认：这个文件和图像源网络编辑器的网站部分，如果有侵权及时通信删除。 汇海hvihi.com网站原创文章，请注明出处。