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 相关文章推荐
接收键盘指令的脚本
Jun 26 Javascript
用javascript对一个json数组深度赋值示例
Jul 27 Javascript
jQuery 判断图片是否加载完成方法汇总
Aug 10 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
Jun 17 Javascript
js创建数组的简单方法
Jul 27 Javascript
微信小程序 页面传值详解
Mar 10 Javascript
值得分享和收藏的xmlplus组件学习教程
May 05 Javascript
原生JS实现的简单小钟表功能示例
Aug 30 Javascript
浅谈vue 锚点指令v-anchor的使用
Nov 13 Javascript
vue基于better-scroll实现左右联动滑动页面
Jun 30 Javascript
前端学习——JavaScript原生实现购物车案例
Mar 31 Javascript
JS 基本概念详细介绍
Oct 16 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
第七节--类的静态成员
2006/11/16 PHP
SSI指令
2006/11/25 PHP
[转帖]PHP世纪万年历
2006/12/06 PHP
PHP函数实现分页含文本分页和数字分页
2014/10/23 PHP
PHP is_array() 检测变量是否是数组的实现方法
2016/06/13 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
Laravel中使用Queue的最基本操作教程
2017/12/27 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
tp5框架的增删改查操作示例
2019/10/31 PHP
对象转换为原始值的实现方法
2016/06/06 Javascript
微信小程序图表插件(wx-charts)实例代码
2017/01/17 Javascript
JS对象创建的几种方式整理
2017/02/28 Javascript
javascript 中null和undefined区分和比较
2017/04/19 Javascript
vue实现的双向数据绑定操作示例
2018/12/04 Javascript
vue和iview实现Scroll 数据无限滚动功能
2019/10/31 Javascript
vue点击页面空白处实现保存功能
2019/11/06 Javascript
python实现字符串和日期相互转换的方法
2015/05/13 Python
开源Web应用框架Django图文教程
2017/03/09 Python
python3实现TCP协议的简单服务器和客户端案例(分享)
2017/06/14 Python
scrapy爬虫完整实例
2018/01/25 Python
python机器人行走步数问题的解决
2018/01/29 Python
利用Python将文本中的中英文分离方法
2018/10/31 Python
django连接mysql数据库及建表操作实例详解
2019/12/10 Python
tensorflow实现读取模型中保存的值 tf.train.NewCheckpointReader
2020/02/10 Python
德国自行车商店:Tretwerk
2019/06/21 全球购物
XMLHttpRequest对象在IE和Firefox中创建方式有没有不同
2016/03/23 面试题
酒店总经理欢迎词
2014/01/08 职场文书
婚庆公司计划书
2014/09/15 职场文书
励志广播稿300字(5篇)
2014/09/15 职场文书
《爱的教育》读书心得
2014/11/08 职场文书
2015年学校团委工作总结
2015/05/26 职场文书
公司环境卫生管理制度
2015/08/05 职场文书
2015年物业公司保洁工作总结
2015/10/22 职场文书
加强党性修养心得体会
2016/01/21 职场文书
导游词之太湖
2019/10/08 职场文书
分享3个非常实用的 Python 模块
2022/03/03 Python