redux中的操作旨在像使用
我正在开发一个reactjs电子商务应用程序，为此我需要在产品详细信息页面中查看产品是否已在购物车页面中可用。这两个组件都有不同的api端点。我不知道该怎么做。我正在使用react redux进行状态管理。
CartActions.js
export const getItemsAddedToCart = () => dispatch => {
dispatch({
type: cartActionTypes.GET_CART_LOAD
});
new _rest()
.get(URLConstants.urls.GET_ALL_ITEMS_IN_CART)
.then(response => {
dispatch({
type: cartActionTypes.GET_CART_SUCCESS,
payload: response.data
});
})
.catch(err => {
dispatch({
type: cartActionTypes.GET_CART_ERROR,
error: err
});
});
};
export const IsItemInCart = (pId) => ({
type: cartActionTypes.CHECK_ITEM_IN_CART,
pId
});
这些是我在productDetails页面中的操作，我正在IsItemIncart中传递产品id。然后在reducer中，我试图查看cart的更新状态。
CartReducer.js
const initialState = {
loading: false,
loaded: false,
error: null,
itemsInCart: null,
pagination: null,
totalamount: 0,
checkedItems: [],
paymentStatus: "NIL_TRANSACTION",
order: {
addressId: "NIL",
paymentType: "NIL"
},
isItemInCart: false,
bulkOrderData: []
};
export default function (state = initialState, action) {
switch (action.type) {
case cartActionTypes.GET_CART_LOAD:
return {
...state,
loading: false
};
case cartActionTypes.GET_CART_SUCCESS:
return {
...state,
loaded: true,
loading: false,
totalItemInCart: action.payload._embedded.cartResourceList.length,
itemsInCart: action.payload._embedded.cartResourceList,
totalamount: action.payload._embedded.cartResourceList.reduce(
(acc, item) => {
return item.totalAmount + acc;
},
0
),
pagination: action.payload.page
};
case cartActionTypes.CHECK_ITEM_IN_CART:
const findItem = state.itemsInCart.findIndex(
productId => productId === action.pid
);
return {
...state,
isItemInCart: true,
/*
* Check For Item In Cart Here
* */
};
这是我的减速器，我想在这里检查一下，我不知道该怎么做。
在CartAction.js 中
export const IsItemInCart = (productId) => {
return (dispatch, getState) => {
// you can use your cart reducer name instead of cartData
const cartData = getState().cartData;
// match your productId with your products in cart
const product = cartData.find((singleProductInCart) => {return singleProductInCart.productId === productId});
// then proceed further depending on you get product or not
}
}
getItemsAddedToCart一样转换状态。IsItemInCart不是您应该如何使用操作来检查购物车中的特定商品是否是可以在商店外(在组件中或其他地方(计算的派生属性，如下所示：
import React from 'react';
import { connect } from 'react-redux';
import { getItemsAddedToCart } from './CartActions';
// these will get mapped to the components props
// using the connect function from react-redux
const mapDispatchToProps = (dispatch) => ({
fetchCartItems: () => dispatch(getItemsAddedToCart())
})
const mapStateToProps = (state, props) => ({
cartList: state.cart.itemsInCart,
});
class ExampleComponent extends React.Component {
constructor(props) {
super(props);
// if has not been fetched yet
if (!this.props.cartList) {
this.props.fetchCartItems();
}
}
checkItemInCart(pID) {
return this.props.cartList.find(
(product) => product.id === pID);
}
....
....
}
export default connect(mapStateToProps, mapDispatchToProps)(ExampleComponent);
使用react读取用法。