Family Recipe Mini Program Development Summary (Based on Taro + Redux Toolkit)

🧱 Tech Stack

• Framework: Taro 3 + React + TypeScript
• State Management: Redux Toolkit + Redux Persist
• Cloud Services: Tencent Cloud CloudBase
• Build Tool: Initially Vite, later migrated to Webpack

📦 Feature Overview

• Shared recipe library for all family members
• Daily meal planning for the next 7 days
• Filtering by category (stir-fried, soup, main meat, side meat) + recipe search
• Image upload, user authentication, and data storage powered by CloudBase

⚙️ Challenges and Solutions

• Redux Toolkit not working properly in Vite
  React Context used by Redux Toolkit couldn't be resolved correctly in the Vite environment. This caused useSelector to fail to access state and Provider to fail to inject properly. Plugin configuration didn’t help, so the project was migrated to Webpack.

• Image upload limitations
  Mini programs have restrictions on image size and format. Compression and validation were added before uploading to improve success rate.

• Incomplete Taro wrappers
  Some native WeChat APIs, such as image preview after selection, are not fully wrapped by Taro. These were accessed directly using wx.* APIs.

• Tencent Cloud database usage differences
  In WeChat CloudBase, database operations require wrapping data in a data field. However, in Tencent Cloud's SDK, data should be passed directly without this field to avoid API errors.

• Cloud function invocation
  All cloud database operations are centralized in backend cloud functions and called using Taro.cloud.callFunction on the frontend. This ensures consistent data models and security. Errors and results are handled in a unified way.

Example: Encapsulated Cloud Function Call

/**
 * Generic cloud function caller
 * @param name Cloud function name
 * @param data Payload object
 * @returns result (throws error on failure)
 */
export async function callCloud<T>(name: string, data: Record<string, any> = {}): Promise<CloudResult<T>> {
  try {
    const token = getToken()
    if (token) {
      data.token = token
    }
    const res = await Taro.cloud.callFunction({ name, data })
    if ('result' in res) {
      const result = res.result as CloudResult<T>
      if (result.code !== 0) {
        throw new Error(result.message || 'Cloud function call failed')
      }
      return result
    }
    return res as CloudResult<T>
  } catch (error) {
    throw error
  }
}

• Automatically attaches auth token
• Throws error if code !== 0, enabling centralized error handling
• Compatible with edge case response structures

🌀 Vite → Webpack: Migration Notes

Background

Initially built with Vite for fast dev experience, but encountered critical issues when integrating Redux Toolkit:

• State injection failed: Provider failed to inject state properly, and useSelector couldn't access any state.
• Runtime errors: createContext couldn't be exported correctly.
• Community support lacking: No official or GitHub solutions worked.

Migration Steps

1. Changed compiler from vite to webpack5 in the Taro config.
2. Replaced build dependencies and removed @tarojs/plugin-vite.
3. Reconfigured Babel and PostCSS settings.
4. Reinstalled packages and updated scripts for Webpack compatibility.

Outcome

• Redux Toolkit worked normally, state injection fixed
• Build output stable and CSS rendered correctly