欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-20 22:49:33
前言的前言 最近被一款来自京东凹凸实验室的多终端开发框架taro吸粉了,官方对 taro 的简介是使用react语法,一键生成多终端应用(包括小程序 / h5 / 快应用...

前言的前言

最近被一款来自京东凹凸实验室的多终端开发框架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快速上手的方法示例

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