taro+React-redux中使用仓库本地存值

哈士奇冲鸭

于 2024-04-16 17:57:34 发布

阅读量242

点赞数 3

文章标签： taro react.js 前端

本文链接：https://blog.csdn.net/weixin_46465573/article/details/137833796

版权

本文介绍了如何在Taro.js项目中使用Redux进行状态管理，包括创建仓库、定义常量、actions（如保存门店信息操作）和reducers（处理状态更新）。展示了类组件和函数组件中的应用方式。

摘要由CSDN通过智能技术生成

1.创建仓库

1.constant

// 用于定义action对象中type类型的常量值
export const SAVE_BENEFITS_SHOP_INFO = 'SAVE_BENEFITS_SHOP_INFO'

2.actions

  import { SAVE_BENEFITS_SHOP_INFO } from '../constants/common'
  /**
   * 保存更新仓库信息
   * @param {Object} shopInfo 门店信息
   */
  export const updateBenefitsShopInfo = (benefitsShopInfo) => {
    return {
      type: SAVE_BENEFITS_SHOP_INFO,
      benefitsShopInfo
    }
  }

3.reducers

  import { SAVE_BENEFITS_SHOP_INFO } from '../constants/common'
   const Inital_state = { benefitsShopInfo: {} }
   export default function common (state = Inital_state, action) {
     switch(action.type) {
       case SAVE_BENEFITS_SHOP_INFO:
         return {
           ...state,
           benefitsShopInfo: action.benefitsShopInfo
        }
   	default:
   	  return state	
     }
   }

2.页面使用

1.类组件

  import { updateBenefitsShopInfo } from '@/store/actions/common'
  import { connect } from '@tarojs/redux'

  @connect(({ common }) => ({
    benefitsShopInfo: common.benefitsShopInfo
  }), (dispatch) => ({
    onUpdateBenefitsShopInfo(benefitsShopInfo) {
      dispatch(updateBenefitsShopInfo(benefitsShopInfo))
    }
  }))

  // 更新值
  this.props.onUpdateBenefitsShopInfo(item)
  // 取值
  this.props.benefitsShopInfo

2.函数组件

   import { useSelector, useDispatch } from '@tarojs/redux'
   import { init_goodsMessage } from '@/store/reducers'
     // 仓库数据
     const { goodsMessage } = useSelector(
       (state) =>
         state.auditPriceCheck || {
           goodsMessage: deepCopy(init_goodsMessage),
         }
     )
     const dispatch = useDispatch()

     dispatch(
         upDataGoodsMessage({
           tabList: newTabList,
           productList: newProductList,
         })
   )
    // 使用  
    直接使用goodsMessage