我要评论前言的前言
最近被一款来自京东凹凸实验室的多终端开发框架taro吸粉了，官方对 taro 的简介是使用react语法，一键生成多终端应用（包括小程序 / h5 / 快应用 / rn 等），而目前 github 的 star 也达到了非常可观的数量：4k+。对此，笔者也尝了把鲜，体验了下如何使用taro写微信小程序。感觉还是十分灵活易用（一气呵成，都没遇到bug！），并且 taro 还集成了 redux，解决了小程序没有数据流框架的痛点。
这里贴一个 taro 的，有兴趣的同行们可以了解下～也可以和我交流～嘿嘿
前言
redux是javascript 状态容器，提供可预测化的状态管理。一般来说，规模比较大的小程序，页面状态，数据缓存，需要管理的东西太多，这时候引入redux可以方便的管理这些状态，同一数据，一次请求，应用全局共享。
而taro也非常友好地为开发者提供了移植的redux。
依赖
为了更方便地使用redux，taro提供了与react-redux api 几乎一致的包 @tarojs/redux 来让开发人员获得更加良好的开发体验。
开发前需要安装redux和@tarojs/redux以及一些需要用到的中间件
$ yarn add redux @tarojs/redux redux-action redux-logger # 或者使用 npm $ npm install --save redux @tarojs/redux redux-action redux-logger
示例
下面通过实现一个todolist快速上手redux。
1. 目录结构
首先通过目录划分我们的store/reducers/actions。
分别在文件夹里创建index.js，作为三个模块的主文件。reducers和actions里面的内容我们需要规划好功能之后再来处理。
// store/index.js
import { createstore, applymiddleware } from 'redux'
// 引入需要的中间件
import thunkmiddleware from 'redux-thunk'
import { createlogger } from 'redux-logger'
// 引入根reducers
import rootreducer from '../reducers'
const middlewares = [
thunkmiddleware,
createlogger()
]
// 创建store
export default function configstore () {
const store = createstore(rootreducer, applymiddleware(...middlewares))
return store
}
2. 编写todos
首先在app.js中引入一开始定义好的store，使用@tarojs/redux中提供的provider组件将前面写好的store接入应用中，这样一来，被provider包裹的页面都能共享到应用的store。
import taro, { component } from '@tarojs/taro'
import { provider } from '@tarojs/redux'
import configstore from './store'
import index from './pages/index'
import './app.scss'
const store = configstore()
class app extends component {
...
render () {
return (
<provider store={store}>
<index />
</provider>
)
}
}
接下来就可以正式开始规划todos应用的主要功能了。
首先我们可以新建constants文件夹来定义一系列所需的action type常量。例如todos我们可以先新增add和delete两个action type来区分新增和删除todo指令。
// src/constants/todos.js export const add = 'add' export const delete = 'delete'
然后开始创建处理这两个指令的reducer。
// src/reducers/index.js
import { combinereducers } from 'redux'
import { add, delete } from '../constants/todos'
// 定义初始状态
const initial_state = {
todos: [
{id: 0, text: '第一条todo'}
]
}
function todos (state = initial_state, action) {
// 获取当前todos条数，用以id自增
let todonum = state.todos.length
switch (action.type) {
// 根据指令处理todos
case add:
return {
...state,
todos: state.todos.concat({
id: todonum,
text: action.data
})
}
case delete:
let newtodos = state.todos.filter(item => {
return item.id !== action.id
})
return {
...state,
todos: newtodos
}
default:
return state
}
}
export default combinereducers({
todos
})
接着在action中定义函数对应的指令。
// src/actions/index.js
import { add, delete } from '../constants/todos'
export const add = (data) => {
return {
data,
type: add
}
}
export const del = (id) => {
return {
id,
type: delete
}
}
完成上述三步之后，我们就可以在todos应用的主页使用相应action修改并取得新的store数据了。来看一眼todos的index.js。
// src/pages/index/index.js
import taro, { component } from '@tarojs/taro'
import { view, input, text } from '@tarojs/components'
import { connect } from '@tarojs/redux'
import './index.scss'
import { add, del } from '../../actions/index'
class index extends component {
config = {
navigationbartitletext: '首页'
}
constructor () {
super ()
this.state = {
newtodo: ''
}
}
savenewtodo (e) {
let { newtodo } = this.state
if (!e.detail.value || e.detail.value === newtodo) return
this.setstate({
newtodo: e.detail.value
})
}
addtodo () {
let { newtodo } = this.state
let { add } = this.props
if (!newtodo) return
add(newtodo)
this.setstate({
newtodo: ''
})
}
deltodo (id) {
let { del } = this.props
del(id)
}
render () {
// 获取未经处理的todos并展示
let { newtodo } = this.state
let { todos, add, del } = this.props
const todosjsx = todos.map(todo => {
return (
<view classname='todos_item'><text>{todo.text}</text><view classname='del' onclick={this.deltodo.bind(this, todo.id)}>-</view></view>
)
})
return (
<view classname='index todos'>
<view classname='add_wrap'>
<input placeholder="填写新的todo" onblur={this.savenewtodo.bind(this)} value={newtodo} />
<view classname='add' onclick={this.addtodo.bind(this)}>+</view>
</view>
<view>{ todosjsx }</view>
</view>
)
}
}
export default connect (({ todos }) => ({
todos: todos.todos
}), (dispatch) => ({
add (data) {
dispatch(add(data))
},
del (id) {
dispatch(del(id))
}
}))(index)
最后来看一眼实现的效果～～
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论