前阵子一直在做小程序开发,采用的是官方给的框架 废话了这么多,咳咳,上面的都不是我们要讨论的重点,我们今天的重点是—在小程序里使用
注意了,接下来划重点了~ 具体实现运行我们的项目,发现官网已经给了我们一些 step1入口文件 import { createStore , applyMiddleware } from 'redux'
import promiseMiddleware from 'redux-promise'
import reducer from './reducers'
const Store = createStore(
reducer ,
applyMiddleware(promiseMiddleware)
)
export default configStore => Store
step2剩下三个文件夹分别是
export const INCREMENT = 'INCREMENT'
export const DECREMENT = 'DECREMENT'
export const ASYNC_INCREMENT = 'ASYNC_INCREMENT'
export const ADD = 'ADD'
export const REMOVE = 'REMOVE'
最后通过 export * from './counter'
export * from './list'
step3
import { combineReducers } from 'redux'
import counter from './counter'
import list from './list'
export default combineReducers({
counter ,
list
})
首先将 那么
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)
我们介绍一下 接着,我们看看里面的
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我们终于走到这一步了,到这里,你已经离预期不远啦,就剩一个
export * from './counter'
很简单,只需要将所需的 这个里面我只定义了
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)
})
})
这里跟 ok,到此为止,你已经基本完成了一个 接下来,就是展示它怎么使用的时候了~ step5我们创建一个 代码如下: <template lang="wxml"> <view class="container"> <text>同步{{ num }}</text> <text>异步{{ asyncNum }}</text> <button @tap="increment" type="primary">加一</button> <button @tap="decrement" type="primary">减一</button> <button @tap="asyncIncrement" type="primary">异步加一</button> <button @tap="addList">添加</button> <view class="box"> <view class="item" wx:for-items="{{ todoList }}" wx:key="index"> <view class="title">{{ item.title }}</view> <view class="content">{{ item.text }}</view> <button type="primary" class="delete" @tap="delete({{index}})">删除</button> </view> </view> </view> </template> <script> import wepy from 'wepy' import { connect } from 'wepy-redux' import { INCREMENT , DECREMENT } from '../store/types/counter' import { asyncInc } from '../store/actions' @connect({ num(state){ return state.counter.num; }, asyncNum(state){ return state.counter.asyncNum; } },{ increment : INCREMENT , decrement : DECREMENT , asyncIncrement : asyncInc }) export default class Index extends wepy.page { components = {} computed = { todoList(){ return wepy.$store.getState().list; } } methods = { delete(index){ wepy.$store.dispatch({ type : 'REMOVE' , payload : index }) }, addList(){ wepy.$store.dispatch({ type : 'ADD' , payload : { title : '学习' , text : '好好学习' }}) } } onLoad () { console.log(wepy.$store.getState()) } } </script> <style lang="less"> text{ display: block; text-align: center; margin: 10px auto; } button{ width: 90%; display: block; margin: 10px auto; } .item{ display: flex; align-items: center; text-align: center; padding: 0 15px; .title{ font-size: 14px; line-height: 20px; margin: 10px auto; } .content{ font-size: 15px; flex: 1; } .delete{ width: 70px; height: 40px; line-height: 40px; } } </style>
不出意外,运行后,你的小程序的界面会跟下面一样————丑~ 点一点看,发现卧槽,很牛逼,有木有~ ok~ 我们一起看看上面的代码是怎么做的~ 样式结构方面我们这里不做讨论,主要看 我们重点看看 从
|
温馨提示:这篇文章没有解决您的问题?欢迎添加微信:18948083295,有微信小程序专业人员,保证有问必答。转载本站文章请注明转自http://www.okeydown.com/(微信小程序网)。
- 微信扫描二维码关注官方微信
- ▲长按图片识别二维码