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

2019-11-19 13:37:27

字體：大中小

來源：轉載

供稿：網友

前言的前言

最近被一款來自京東凹凸實驗室的多終端開發框架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.jsimport { createStore, applyMiddleware } from 'redux'// 引入需要的中間件import thunkMiddleware from 'redux-thunk'import { createLogger } from 'redux-logger'// 引入根reducersimport rootReducer from '../reducers'const middlewares = [ thunkMiddleware, createLogger()]// 創建storeexport 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.jsexport const ADD = 'ADD'export const DELETE = 'DELETE'

然后開始創建處理這兩個指令的reducer。

// src/reducers/index.jsimport { 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.jsimport { 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.jsimport 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)

最后來看一眼實現的效果～～