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

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:12:40

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

Taro集成Redux快速上手的方法示例:前言的前言最近被一款來(lái)自京東凹凸實(shí)驗(yàn)室的多終端開(kāi)發(fā)框架Taro吸粉了，官方對(duì) Taro 的簡(jiǎn)介是使用React語(yǔ)法，一鍵生成多終端應(yīng)用（包括小程序 / H5 / 快應(yīng)用 / RN 等），而目前 Github 的 Star 也達(dá)到了非常可觀的數(shù)量：4k+。對(duì)此，筆者也嘗了把鮮，體驗(yàn)了

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀Taro集成Redux快速上手的方法示例:前言的前言最近被一款來(lái)自京東凹凸實(shí)驗(yàn)室的多終端開(kāi)發(fā)框架Taro吸粉了，官方對(duì) Taro 的簡(jiǎn)介是使用React語(yǔ)法，一鍵生成多終端應(yīng)用（包括小程序 / H5 / 快應(yīng)用 / RN 等），而目前 Github 的 Star 也達(dá)到了非常可觀的數(shù)量：4k+。對(duì)此，筆者也嘗了把鮮，體驗(yàn)了

前言的前言

最近被一款來(lái)自京東凹凸實(shí)驗(yàn)室的多終端開(kāi)發(fā)框架Taro吸粉了，官方對(duì) Taro 的簡(jiǎn)介是使用React語(yǔ)法，一鍵生成多終端應(yīng)用（包括小程序 / H5 / 快應(yīng)用 / RN 等），而目前 Github 的 Star 也達(dá)到了非常可觀的數(shù)量：4k+。對(duì)此，筆者也嘗了把鮮，體驗(yàn)了下如何使用Taro寫(xiě)微信小程序。感覺(jué)還是十分靈活易用（一氣呵成，都沒(méi)遇到bug！），并且 Taro 還集成了 Redux，解決了小程序沒(méi)有數(shù)據(jù)流框架的痛點(diǎn)。

這里貼一個(gè) Taro 的官方文檔，有興趣的同行們可以了解下～也可以和我交流～嘿嘿

前言

Redux是JavaScript 狀態(tài)容器，提供可預(yù)測(cè)化的狀態(tài)管理。一般來(lái)說(shuō)，規(guī)模比較大的小程序，頁(yè)面狀態(tài)，數(shù)據(jù)緩存，需要管理的東西太多，這時(shí)候引入Redux可以方便的管理這些狀態(tài)，同一數(shù)據(jù)，一次請(qǐng)求，應(yīng)用全局共享。

而Taro也非常友好地為開(kāi)發(fā)者提供了移植的Redux。

依賴

為了更方便地使用Redux，Taro提供了與react-redux API 幾乎一致的包 @tarojs/redux 來(lái)讓開(kāi)發(fā)人員獲得更加良好的開(kāi)發(fā)體驗(yàn)。

開(kāi)發(fā)前需要安裝redux和@tarojs/redux以及一些需要用到的中間件

$ yarn add redux @tarojs/redux redux-action redux-logger
# 或者使用 npm
$ npm install --save redux @tarojs/redux redux-action redux-logger

示例

下面通過(guò)實(shí)現(xiàn)一個(gè)Todolist快速上手Redux。

1. 目錄結(jié)構(gòu)

首先通過(guò)目錄劃分我們的store/reducers/actions。

分別在文件夾里創(chuàng)建index.js，作為三個(gè)模塊的主文件。reducers和actions里面的內(nèi)容我們需要規(guī)劃好功能之后再來(lái)處理。

// 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. 編寫(xiě)Todos

首先在app.js中引入一開(kāi)始定義好的store，使用@tarojs/redux中提供的Provider組件將前面寫(xiě)好的store接入應(yīng)用中，這樣一來(lái)，被Provider包裹的頁(yè)面都能共享到應(yīng)用的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> 
 )
 }
}

接下來(lái)就可以正式開(kāi)始規(guī)劃Todos應(yīng)用的主要功能了。

首先我們可以新建constants文件夾來(lái)定義一系列所需的action type常量。例如Todos我們可以先新增ADD和DELETE兩個(gè)action type來(lái)區(qū)分新增和刪除Todo指令。

// src/constants/todos.js

export const ADD = 'ADD'
export const DELETE = 'DELETE'

然后開(kāi)始創(chuàng)建處理這兩個(gè)指令的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) {
 // 獲取當(dāng)前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ù)對(duì)應(yīng)的指令。

// 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應(yīng)用的主頁(yè)使用相應(yīng)action修改并取得新的store數(shù)據(jù)了。來(lái)看一眼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: '首頁(yè)'
 }

 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 (
 <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="填寫(xiě)新的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)

最后來(lái)看一眼實(shí)現(xiàn)的效果～～