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 相关文章推荐
8个超棒的学习 jQuery 的网站 推荐收藏
Apr 02 Javascript
js中如何把字符串转化为对象、数组示例代码
Jul 17 Javascript
使用jquery写个更改表格行顺序的小功能
Apr 29 Javascript
jQuery源码分析之jQuery中的循环技巧详解
Sep 06 Javascript
教你使用javascript简单写一个页面模板引擎
May 05 Javascript
详解JavaScript ES6中的模板字符串
Jul 28 Javascript
js显示动态时间的方法详解
Aug 20 Javascript
jQuery实现鼠标跟随效果
Feb 20 Javascript
vue中eventbus被多次触发以及踩过的坑
Dec 02 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
Mar 15 Javascript
JS实现拼图游戏
Jan 29 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
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
星际争霸任务指南——神族
2020/03/04 星际争霸
PHP错误机制知识汇总
2016/03/24 PHP
javascript new一个对象的实质
2010/01/07 Javascript
JavaScript Event学习第八章 事件的顺序
2010/02/07 Javascript
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
2011/07/26 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件。
2011/12/26 Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
2013/08/29 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
2013/09/06 Javascript
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
JQuery EasyUI 数字格式化处理示例
2014/05/05 Javascript
nodejs中转换URL字符串与查询字符串详解
2014/11/26 NodeJs
每天一篇javascript学习小结(RegExp对象)
2015/11/17 Javascript
jquery+ajax+text文本框实现智能提示完整实例
2016/07/09 Javascript
ES6新特性六:promise对象实例详解
2017/04/21 Javascript
js实现倒计时器自定义时间和暂停
2019/02/25 Javascript
JS数组Object.keys()方法的使用示例
2019/06/05 Javascript
原生JS实现留言板功能
2020/02/08 Javascript
python去掉字符串中重复字符的方法
2014/02/27 Python
Python cx_freeze打包工具处理问题思路及解决办法
2016/02/13 Python
python socket多线程通讯实例分析(聊天室)
2016/04/06 Python
python读取文本绘制动态速度曲线
2018/06/21 Python
如何使用python进行pdf文件分割
2019/11/11 Python
解决pyinstaller 打包exe文件太大,用pipenv 缩小exe的问题
2020/07/13 Python
用python发送微信消息
2020/12/21 Python
基于Python实现天天酷跑功能
2021/01/06 Python
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
2013/08/11 HTML / CSS
Jacques Lemans德国:奥地利钟表品牌
2019/12/26 全球购物
英国鞋网:Rubber Sole
2020/03/03 全球购物
餐厅经理岗位职责和岗位目标
2014/02/13 职场文书
医疗纠纷协议书
2014/04/16 职场文书
创先争优一句话承诺
2014/05/29 职场文书
党员批评与自我批评
2014/10/15 职场文书
实习计划书范文
2015/01/16 职场文书
婚礼答谢礼品
2015/01/20 职场文书
MySQL优化之如何写出高质量sql语句
2021/05/17 MySQL
「偶像大师 MILLION LIVE!」七尾百合子手办开订
2022/03/21 日漫