Taro集成Redux快速上手的方法示例


Posted in Javascript onJune 21, 2018

前言的前言

最近被一款来自京东凹凸实验室的多终端开发框架Taro吸粉了,官方对 Taro 的简介是使用React语法,一键生成多终端应用(包括小程序 / H5 / 快应用 / RN 等),而目前 Github 的 Star 也达到了非常可观的数量:4k+。对此,笔者也尝了把鲜,体验了下如何使用Taro写微信小程序。感觉还是十分灵活易用(一气呵成,都没遇到bug!),并且 Taro 还集成了 Redux,解决了小程序没有数据流框架的痛点。

这里贴一个 Taro 的官方文档,有兴趣的同行们可以了解下~也可以和我交流~嘿嘿

Taro集成Redux快速上手的方法示例

前言

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

Taro集成Redux快速上手的方法示例

分别在文件夹里创建index.js,作为三个模块的主文件。reducersactions里面的内容我们需要规划好功能之后再来处理。

// 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我们可以先新增ADDDELETE两个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)

最后来看一眼实现的效果~~

Taro集成Redux快速上手的方法示例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 锚点跳转滚动条平滑滚动一句话代码
Apr 30 Javascript
JS获取当前日期和时间的简单实例
Nov 19 Javascript
jQuery动态添加、删除元素的方法
Jan 09 Javascript
EasyUI实现二级页面的内容勾选的方法
Mar 01 Javascript
jquery的幻灯片图片切换效果代码分享
Sep 07 Javascript
JavaScript组件开发完整示例
Dec 15 Javascript
js实现加载页面就自动触发超链接的示例
Aug 31 Javascript
JS库之wow.js使用方法
Sep 14 Javascript
AngularJS中controller控制器继承的使用方法
Nov 03 Javascript
JavaScript中AOP的实现与应用
May 06 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
Oct 25 Javascript
Vue性能优化的方法
Jul 30 Javascript
vue2.0项目实现路由跳转的方法详解
Jun 21 #Javascript
JS实现快递单打印功能【推荐】
Jun 21 #Javascript
详解javascript中的babel到底是什么
Jun 21 #Javascript
webpack打包react项目的实现方法
Jun 21 #Javascript
Vue Router的懒加载路径的解决方法
Jun 21 #Javascript
详解如何使用webpack打包JS
Jun 21 #Javascript
vue自定义一个v-model的实现代码
Jun 21 #Javascript
You might like
php快速url重写 更新版[需php 5.30以上]
2010/04/20 PHP
php微信支付接口开发程序
2016/08/02 PHP
有关js的变量作用域和this指针的讨论
2010/12/16 Javascript
javascript suggest效果 自动完成实现代码分享
2012/02/17 Javascript
jquery+easeing实现仿flash的载入动画
2015/03/10 Javascript
jQuery实现的超简单点赞效果实例分析
2015/12/31 Javascript
JavaScript中的原始值和复杂值
2016/01/07 Javascript
vue2.0开发实践总结之疑难篇
2016/12/07 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
2017/03/09 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
2017/06/16 jQuery
详解webpack分离css单独打包
2017/06/21 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
2020/12/30 Javascript
深入理解移动前端开发之viewport
2018/10/19 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
2019/05/16 Javascript
微信小程序—setTimeOut定时器的问题及解决
2019/07/26 Javascript
vue多个元素的样式选择器问题
2019/11/29 Javascript
vue实现数据控制视图的原理解析
2020/01/07 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
2020/09/10 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
2020/11/07 Javascript
python中print的不换行即时输出的快速解决方法
2016/07/20 Python
Python输出指定字符串的方法
2020/02/06 Python
python上传时包含boundary时的解决方法
2020/04/08 Python
了解一下python内建模块collections
2020/09/07 Python
python批量修改文件名的示例
2020/09/27 Python
HTML5利用约束验证API来检查表单的输入数据的代码实例
2016/12/20 HTML / CSS
漫威玩具服装及周边商品官方购物网站:Marvel Shop
2019/05/11 全球购物
意大利奢侈品牌在线精品店:Jole.it
2020/11/23 全球购物
运动会领导邀请函
2014/02/05 职场文书
2014年征兵标语
2014/06/20 职场文书
观看《周恩来的四个昼夜》思想汇报
2014/09/12 职场文书
民主评议党员工作总结
2014/10/20 职场文书
研究生给导师的自荐信
2015/03/06 职场文书
留学推荐信(中英文版)
2015/03/26 职场文书
2015年宣传部个人工作总结
2015/05/14 职场文书
导游词之上海杜莎夫人蜡像馆
2019/11/22 职场文书
vue实现锚点定位功能
2021/06/29 Vue.js