前言的前言
成都創(chuàng)新互聯(lián)于2013年開始，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務公司，擁有項目成都網(wǎng)站建設、成都網(wǎng)站制作網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元華州做網(wǎng)站,已為上家服務,為華州各地企業(yè)和個人服務,聯(lián)系電話:18982081108
最近被一款來自京東凹凸實驗室的多終端開發(fā)框架Taro吸粉了，官方對 Taro 的簡介是使用React語法，一鍵生成多終端應用（包括小程序 / H5 / 快應用 / RN 等），而目前 Github 的 Star 也達到了非?？捎^的數(shù)量：4k+。對此，筆者也嘗了把鮮，體驗了下如何使用Taro寫微信小程序。感覺還是十分靈活易用（一氣呵成，都沒遇到bug?。⑶?Taro 還集成了 Redux，解決了小程序沒有數(shù)據(jù)流框架的痛點。
這里貼一個 Taro 的官方文檔，有興趣的同行們可以了解下～也可以和我交流～嘿嘿
前言
Redux是JavaScript 狀態(tài)容器，提供可預測化的狀態(tài)管理。一般來說，規(guī)模比較大的小程序，頁面狀態(tài)，數(shù)據(jù)緩存，需要管理的東西太多，這時候引入Redux可以方便的管理這些狀態(tài)，同一數(shù)據(jù)，一次請求，應用全局共享。
而Taro也非常友好地為開發(fā)者提供了移植的Redux。
依賴
為了更方便地使用Redux，Taro提供了與react-redux API 幾乎一致的包 @tarojs/redux 來讓開發(fā)人員獲得更加良好的開發(fā)體驗。
開發(fā)前需要安裝redux和@tarojs/redux以及一些需要用到的中間件
$ yarn add redux @tarojs/redux redux-action redux-logger # 或者使用 npm $ npm install --save redux @tarojs/redux redux-action redux-logger
示例
下面通過實現(xiàn)一個Todolist快速上手Redux。
1. 目錄結(jié)構(gòu)
首先通過目錄劃分我們的store/reducers/actions。
分別在文件夾里創(chuàng)建index.js，作為三個模塊的主文件。reducers和actions里面的內(nèi)容我們需要規(guī)劃好功能之后再來處理。
重慶分公司
重慶分公司
// 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()
]
// 創(chuàng)建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 (
)
}
}接下來就可以正式開始規(guī)劃Todos應用的主要功能了。
首先我們可以新建constants文件夾來定義一系列所需的action type常量。例如Todos我們可以先新增ADD和DELETE兩個action type來區(qū)分新增和刪除Todo指令。
// src/constants/todos.js export const ADD = 'ADD' export const DELETE = 'DELETE'
然后開始創(chuàng)建處理這兩個指令的reducer。
// src/reducers/index.js
import { combineReducers } from 'redux'
import { ADD, DELETE } from '../constants/todos'
// 定義初始狀態(tài)
const INITIAL_STATE = {
todos: [
{id: 0, text: '第一條todo'}
]
}
function todos (state = INITIAL_STATE, action) {
// 獲取當前todos條數(shù)，用以id自增
let todoNum = state.todos.length
switch (action.type) {
// 根據(jù)指令處理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中定義函數(shù)對應的指令。
// 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數(shù)據(jù)了。來看一眼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 () {
// 獲取未經(jīng)處理的todos并展示
let { newTodo } = this.state
let { todos, add, del } = this.props
const todosJsx = todos.map(todo => {
return (
{todo.text} -
+
{ todosJsx }
)
}
}
export default connect (({ todos }) => ({
todos: todos.todos
}), (dispatch) => ({
add (data) {
dispatch(add(data))
},
del (id) {
dispatch(del(id))
}
}))(Index)
最后來看一眼實現(xiàn)的效果～～
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
