时间戳

首页 > 解决方案 > 如何获取从添加到购物车页面传递的产品的 redux 存储数据

react-native - 如何获取从添加到购物车页面传递的产品的 redux 存储数据

问题描述

如何将 redux 用于类似电子商务的应用程序，我们可以在其中添加产品并增加计数现在在这里如何获取我们存储的 id 以增加计数的商店数据我能够存储数据但同时得到一个错误 ？

  Class {
"_dispatchInstances": null,
"_dispatchListeners": null,
"_targetInst": FiberNode {
  "tag": 5,
  "key": null,
  "type": "RCTView",
},
"bubbles": undefined,
"cancelable": undefined,
"currentTarget": null,
"defaultPrevented": undefined,
"dispatchConfig": Object {
  "dependencies": Array [],
  "registrationName": "onResponderGrant",
},
"eventPhase": undefined,
"isDefaultPrevented": [Function functionThatReturnsFalse],
"isPersistent": [Function functionThatReturnsTrue],
"isPropagationStopped": [Function functionThatReturnsFalse],
"isTrusted": undefined,
"nativeEvent": Object {
  "changedTouches": Array [
    [Circular],
  ],
  "identifier": 0,
  "locationX": 2.53955078125,
  "locationY": 17.95975112915039,
  "pageX": 331.53955078125,
  "pageY": 57.95975112915039,
  "target": 2595,
  "timestamp": 42790002,
  "touches": Array [
    [Circular],
  ],
},
"target": 2595,
"timeStamp": 1582794322382,
"touchHistory": Object {
  "indexOfSingleActiveTouch": 0,
  "mostRecentTimeStamp": 42790167,
  "numberActiveTouches": 0,
  "touchBank": Array [
    Object {
      "currentPageX": 331.53955078125,
      "currentPageY": 57.95975112915039,
      "currentTimeStamp": 42790167,
      "previousPageX": 331.53955078125,
      "previousPageY": 57.95975112915039,
      "previousTimeStamp": 42790002,
      "startPageX": 331.53955078125,
      "startPageY": 57.95975112915039,
      "startTimeStamp": 42790002,
      "touchActive": false,
    },
  ],
},
"type": undefined,

}, ]

在我的控制台中有这样的东西

这是我的 redux 商店组件

  import { createStore, combineReducers } from 'redux'
import cartItems from '../reducers/cartItems'

export default store = createStore(cartItems);

这是减速器组件'

 const cartItems = (state = [], action) => {
    switch (action.type) {
        case 'ADD_TO_CART':
            return [...state, action.payload]
        case 'REMOVE_FROM_CART':
            return state.filter(cartItem => cartItem.id !== action.payload.id)
    }

    return state
}

export default cartItems

现在要在我的购物车组件中获取产品吗？

这是存储数据的组件

const mapDispatchToProps = (dispatch) => {
    return {
        addItemToCart: (product) => dispatch({ type: 'ADD_TO_CART', payload: product })

    }
}

export default connect(null, mapDispatchToProps)(ContentPage)

这是我的购物车组件？

const CartComponent = props => {
  props.cartItems // will be your cart items

}
const mapStateToProps = (state) => {
    return {
        cartItems: state
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        removeItem: (product) => dispatch({ type: 'REMOVE_FROM_CART', payload: product })
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Yourcart);

标签： react-native

解决方案

要从 redux 存储访问数据，您需要向 connect 函数提供第一个参数，而您没有这样做

export default connect(null, mapDispatchToProps)(ContentPage)

第一个参数应该是这样的

const mapStateToProps = reduxStore => {
 return {
  cartItems: reduxStore
 }
}

export default connect(mapStateToProps , mapDispatchToProps)(ContentPage)

推荐阅读