在小程序里使用Redux的教程

惠民小程序小编了解到，微信小程序成为当下热门话题，下面从多个方面来谈谈在小程序里使用Redux的教程。

最新消息， 对于大多数孩子在上学的家长来说，微信上打开率最高的群，除了工作群大概就是孩子的班级群了。

在小程序里使用Redux进行状态管理，Redux是一个前端状态管理的容器，对于构建大型应用，对里面共享数据、状态的管理非常方便，学过React的同学对它应该不陌生，如果还不了解的同学，不如进服瞧一瞧;

wepy框架本身是支持Redux的，我们在构建项目的时候，将 是否安装Redux选择y就好了，会自动安装依赖，运行项目后看官方给的demo确实是可以做到的，但是官方文档里却对这一块只字不提，经过我自己尝试了一波，这才稍微摸清了它的使用方式，赶紧拿来与你们分享~

注意了，接下来划重点了~

运行我们的项目，发现官网已经给了我们一些Redux的使用方法，实际上主要是放在store文件夹下面了，我们现在来一探究竟~

入口文件index.js，里面主要是 初始化Redux， 其中promiseMiddleware是一个中间件，方便后面action做异步处理~reducers是一个纯函数，用于接受Action和当前State作为参数，返回一个新的State~

import { createStore,applyMiddleware } from 'redux'import promiseMiddleware from 'redux-promise'import reducer from './reducers'const Store = createStore(reducer,applyMiddleware(promiseMiddleware))export default configStore => Storestep2

剩下三个文件夹分别是typesreducers和actions，其中types用于定义我们要触发的action的名称，也就是表示action的名称，这里我定义了counter和list两个types，内容分别如下：

counter.js

export const INCREMENT = 'INCREMENT'export const DECREMENT = 'DECREMENT'export const ASYNC_INCREMENT = 'ASYNC_INCREMENT'

list.js

export const ADD = 'ADD'export const REMOVE = 'REMOVE'

最后通过types文件夹的入口文件index.js将他们暴露出去~

export * from './counter'export * from './list'step3

reducers文件件存放我们的纯函数，用来更改我们的状态 ， 他也有一个入口文件index.js，定义如下：

import { combineReducers } from 'redux'import counter from './counter'import list from './list'export default combineReducers({counter,list})

首先将counter和list的分别引入进来，通过redux定义的combineReducers函数，将所有的reducers合并成一个整体，方便我们后面对其进行管理！

那么counter和list对应的reducer分别是 什么样的？我们直接看代码：

counter.js

import { handleActions } from 'redux-actions'import { INCREMENT,DECREMENT,ASYNC_INCREMENT } from '../types/counter'const defaultState= {num: 0,asyncNum: 0}export default handleActions({[INCREMENT](state){return{...state,num : state.num + 1}},[DECREMENT](state){return{...state,num : state.num - 1}},[ASYNC_INCREMENT](state,action){return {...state,asyncNum : state.asyncNum + action.payload}}},defaultState)

我们介绍一下counter.js里面的reducer， 首先引入了handleActions方法用来创建actions， 它将多个相关的reducer写在一起也是 ，方面后期维护，也方便后期通过dispatch来调用他们更改state里面的状态，它主要接收两个参数，第一个参数时候个大对象，里面存放多个reducer， 第二个参数是初始化的时候state的状态值，因此，我们一开始就定义了defaultState;

接着，我们看看里面的reducer， 分别定义了INCREMENT、DECREMENT和ASYNC_INCREMENT三个reducer，前两个比较简单，分别是对state里面的num值进行 加减操作 ， 最后一个是通过action.payload的值来对asyncNum的值进行异步操作的，具体怎么做到的，我们一会再看~

list.js里定义的reducer跟上面类似，我就不一一介绍了，直接贴代码即可~

list.js

import { handleActions } from 'redux-actions'import { ADD,REMOVE } from '../types/list'const defaultState = [{title : '吃饭',text : '今天我要吃火锅'},{title : '工作',text : '今天我要学习Redux'}]export default handleActions({[ADD]( state,action ){state.push(action.payload)return [...state]},[REMOVE]( state,action ){state.splice( action.payload,1 );return [ ...state ]}},defaultState)step4

我们终于走到这一步了，到这里，你已经离预期不远啦，就剩一个actions文件件了，毫不例外，入口文件index.js如下：

index.js

export * from './counter'

很简单，只需要将所需的action导出即可~

这个里面我只定义了counter的action， 也就是为了刚才异步数据asyncNum准备的~

counter.js

import { ASYNC_INCREMENT } from '../types/counter'import { createAction } from 'redux-actions'export const asyncInc = createAction(ASYNC_INCREMENT,()=>{return new Promise(resolve=>{setTimeout(()=>{resolve(1)},1000)})})

这里跟reducer里面的要区分，这里是可以对数据进行一系列处理的，我们通过createAction创建一个action,该方法主要有两个参数，第一个参数type表示action的类型，第二个参数payloadCreator是一个function，处理并返回需要的payload；如果空缺，会使用默认方法。这里我们是延迟1s后返回一个1；

ok，到此为止，你已经基本完成了一个redux的容器~

接下来，就是展示它怎么使用的时候了~

我们创建一个index.wpy的文件，这里我把代码直接贴出来，然后慢慢来分析看看~

代码如下：

点一点看，发现卧槽，很牛逼，有木有~

ok~ 我们一起看看上面的代码是怎么做的~

样式结构方面我们这里不做讨论，主要看js部分，其中import { INCREMENT,DECREMENT } from '../store/types/counter'和import { asyncInc } from '../store/actions'分别表示从counter和actions导出所需的action

我们重点看看 从wepy-redux中 引入的connect，这个connect很关键，它是连接 组件 和 状态 的桥梁，主要用法是@connect(states,actions)~

states: 访问state上的值，可以是数组或者对象，如果是对象的话，则包含的是K-V对，V可以是函数还可以是字符串，如果是字符串的话则默认获取state[V]， 否则的话则是使用返回值；而对于如果是数组的话（数组中的项只能为字符串），则认为是相同的K-V对象结构。states最终会附加到组件的computed属性值上。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!