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 相关文章推荐
使用focus方法让光标默认停留在INPUT框
Jul 29 Javascript
jquery制作属于自己的select自定义样式
Nov 23 Javascript
全面解析Bootstrap图片轮播效果
Dec 03 Javascript
详解javascript中原始数据类型Null和Undefined
Dec 17 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
May 10 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
Feb 14 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
Mar 13 Javascript
vue 注册组件的使用详解
May 05 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
Sep 01 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
Sep 29 Javascript
Vue插值、表达式、分隔符、指令知识小结
Oct 12 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
Jul 21 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去除数组中重复的元素并按键名排序函数
2008/08/18 PHP
laravel dingo API返回自定义错误信息的实例
2019/09/29 PHP
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
2011/09/02 Javascript
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
2012/06/14 Javascript
js setTimeout 常见问题小结
2013/08/13 Javascript
js使用循环清空某个div中的input标签值
2014/09/29 Javascript
js+div实现文字滚动和图片切换效果代码
2015/08/27 Javascript
JavaScript代码生成PDF文件的方法
2016/02/26 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
2017/01/19 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
2017/04/07 Javascript
JS中的三个循环小结
2017/06/20 Javascript
使用RN Animated做一个“添加购物车”动画的方法
2018/09/12 Javascript
小程序实现订单倒计时功能
2019/04/23 Javascript
小程序登录/注册页面设计的实现代码
2019/05/24 Javascript
在VUE中实现文件下载并判断状态的方法
2019/11/08 Javascript
详解python 字符串和日期之间转换 StringAndDate
2017/05/04 Python
python技能之数据导出excel的实例代码
2017/08/11 Python
Python模拟登录的多种方法(四种)
2018/06/01 Python
PyQt5基本控件使用详解:单选按钮、复选框、下拉框
2019/08/05 Python
python 中Arduino串口传输数据到电脑并保存至excel表格
2019/10/14 Python
Tensorflow实现在训练好的模型上进行测试
2020/01/20 Python
HTML5中的nav标签学习笔记
2016/06/24 HTML / CSS
使用canvas一步步实现图片打码功能的方法
2019/06/17 HTML / CSS
丝芙兰中国官方商城:SEPHORA中国
2018/01/10 全球购物
英国灯具和灯泡网上商店:Lights.co.uk
2018/02/02 全球购物
澳大利亚婴儿礼品公司:The Baby Gift Company
2018/11/04 全球购物
英国水族馆和池塘用品购物网站:Warehouse Aquatics
2019/08/29 全球购物
家长对老师的评语
2014/04/18 职场文书
维稳工作承诺书
2015/01/20 职场文书
布达拉宫导游词
2015/02/02 职场文书
2015年底工作总结范文
2015/05/15 职场文书
党小组考察意见
2015/06/02 职场文书
单位工作证明范本
2015/06/15 职场文书
Java方法重载和方法重写的区别到底在哪?
2021/06/11 Java/Android
Python并发编程实例教程之线程的玩法
2021/06/20 Python
Java后台生成图片的完整步骤
2021/08/04 Java/Android