Taro集成Redux快速上手

本文適合有必定React和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以及一些須要用到的中間件

ps：若是在h5要使用redux的話，還須要引入 nerv-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)

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