Taro集成Redux快速上手的方法示例
前言的前言
最近被一款来自京东凹凸实验室的多终端开发框架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)
最后来看一眼实现的效果~~
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。