如何在Redux中调度功能? [英] How can I dispatch function in redux?
问题描述
我在redux商店中有一个Cart数组，其中包含我添加到购物车中的所有商品
I have a Cart array in the redux store that contains all the items I added it to cart
像这样
const initialState = {
cart: [
{
product: {
id: 1,
name: 'Pizza cheese',
price: 100,
image: require('../../assets/food-3.png'),
description: 'Tempor aute culpa ad voluptate aliquip ad ad laboris.',
},
quantity: 3,
},
{
product: {
id: 2,
name: 'Steak meal',
price: 200,
image: require('../../assets/food-2.png'),
description: 'Tempor aute culpa ad voluptate aliquip ad ad laboris.',
},
quantity: 2,
},
],
};
，并且我有输入要添加优惠券代码，添加后应该会降低总价， 因此，如果我没有在商店中存储总计，该如何实现这些目标? 并在添加此优惠券后呈现总价！
and I have an input to add a coupon code, and when I added it should decrease the total price, so how can I achieve these if I didn't store a total in the store? and render the total price after adding this coupon!
这是我的代码段
reducer/index.js
reducer/index.js
import {
ADD_COUPON,
ADD_TO_CART,
MINUS_FROM_CART,
PLUS_FROM_CART,
REMOVE_ITEM,
} from '../actions/types';
export default cartReducer = (state, action) => {
console.log(action);
switch (action.type) {
case ADD_TO_CART: {
return {
cart: [
...state.cart,
{
product: action.productInfo,
quantity: action.quantity,
},
],
};
}
case PLUS_FROM_CART: {
return {
...state,
cart: state.cart.map(item => {
if (item.product.id === action.productInfo.product.id) {
return {
...item,
quantity: action.quantity + 1,
};
}
return item;
}),
};
}
case MINUS_FROM_CART: {
return Object.assign({}, state, {
cart: state.cart.map(item => {
if (item.product.id === action.productInfo.product.id) {
return Object.assign({}, item, {
quantity:
action.quantity <= 1 ? action.quantity : action.quantity - 1,
});
}
return item;
}),
});
}
case REMOVE_ITEM: {
return Object.assign({}, state, {
cart: [
...state.cart.filter(
({product}) => product.id !== action.productInfo.product.id,
),
],
});
}
case ADD_COUPON: { // here is
console.log(state.cart);
return {
...state,
newTotal:
state.cart.reduce(
(total, item) => total + item.quantity * item.product.price,
0,
) - 50,
};
}
default:
return state;
}
};
购物车屏幕
import React, {Component} from 'react';
import {
Animated,
Dimensions,
FlatList,
ScrollView,
StyleSheet,
Text,
TextInput,
TouchableOpacity,
View,
} from 'react-native';
import Swipeable from 'react-native-gesture-handler/Swipeable';
import Icon from 'react-native-vector-icons/Feather';
import {connect} from 'react-redux';
import CartIcon from '../components/CartIcon';
import CartItem from '../components/CartItem';
import {
MinusFromCart,
plusFromCart,
removeItem,
} from '../store/actions/actions';
class CartsScreen extends Component {
state = {
delivery: 15,
total: this.props.total,
coupon: '',
};
applayCoupon = () => { // here is
const {coupon} = this.state;
if (coupon == 'Free') {
this.props.addCoupon();
}
};
handleIncreaseQuantity = (product, quantity) => {
this.props.increaseQuantity(product, quantity);
};
handleDecreaseQuantity = (product, quantity) => {
this.props.decreaseQuantity(product, quantity);
};
handleRemoveItem = product => {
this.props.removeProduct(product);
};
render() {
return (
<View style={styles.container}>
<View style={{marginBottom: 5}}>
<View
style={{
borderColor: '#d7d7d7',
margin: 15,
borderWidth: 1,
padding: 15,
borderRadius: 10,
flexDirection: 'row',
justifyContent: 'space-between',
}}>
<TextInput
value={this.state.coupon}
style={{width: '80%'}}
onChangeText={coupon => this.setState({coupon})}
placeholder="Write coupon code"
/>
<TouchableOpacity onPress={() => this.applayCoupon()}>
<Text style={{color: '#f00'}}>Apply</Text>
</TouchableOpacity>
</View>
<View
style={{
paddingVertical: 5,
marginBottom: 5,
flexDirection: 'row',
justifyContent: 'space-between',
paddingHorizontal: 15,
}}>
<Text style={{fontSize: 15}}>Subtotal</Text>
<Text style={{fontSize: 15}}>{this.props.total.toFixed(2)}$</Text>
</View>
<View
style={{
paddingVertical: 5,
marginBottom: 5,
flexDirection: 'row',
justifyContent: 'space-between',
paddingHorizontal: 15,
}}>
<Text style={{fontSize: 15}}>Delivery Fee</Text>
<Text style={{fontSize: 15}}>{this.state.delivery}$</Text>
</View>
<View
style={{
borderTopColor: '#ddd',
borderTopWidth: 1,
paddingVertical: 10,
alignSelf: 'center',
}}>
<View
style={{
paddingVertical: 5,
marginBottom: 5,
flexDirection: 'row',
justifyContent: 'space-between',
paddingHorizontal: 15,
}}>
<Text style={{fontWeight: '700', fontSize: 18}}>Total</Text>
<Text style={{fontWeight: '700', fontSize: 18}}>
{this.props.total + this.state.delivery}
</Text>
</View>
<Text
style={{fontWeight: '700', paddingHorizontal: 15, fontSize: 18}}>
after: {this.props.newTotal} $
</Text>
<TouchableOpacity
style={{
justifyContent: 'center',
alignItems: 'center',
padding: 15,
borderRadius: 10,
width: width - 20,
backgroundColor: '#f10',
}}>
<Text style={{fontSize: 15, color: '#fff'}}>Checkout</Text>
</TouchableOpacity>
</View>
</View>
</View>
);
}
}
const mapStateToProps = state => {
return {
cartItem: state.cart,
total: state.cart.reduce(
(total, item) => total + item.quantity * item.product.price,
0,
),
newTotal: state.newTotal
};
};
const mapDispatchToProps = dispatch => {
return {
increaseQuantity: (product, quantity) =>
dispatch(plusFromCart(product, quantity)),
decreaseQuantity: (product, quantity) =>
dispatch(MinusFromCart(product, quantity)),
removeProduct: product => dispatch(removeItem(product)),
addCoupon: () => {
dispatch({type: 'ADD_COUPON'});
},
};
};
export default connect(
mapStateToProps,
mapDispatchToProps,
)(CartsScreen);
推荐答案
我的建议是不要在状态中存储冗余(派生的)信息.这意味着您不需要(也不应该！)将总数存储在状态中.这是一个问题的主要原因是，它使您的州有机会自相矛盾...如果您州的total键不等于项目总数的总和，那么您就会遇到大问题！
My recommendation would be to not store redundant (derived) information in state. This means you don't need to (nor should you!) store the total in the state. The main reason this is a problem is that it gives your state an opportunity to contradict itself... if your state's total key doesn't equal the sum of the item totals, you've got a big problem!
相反，您可以创建一个计算总数的函数，并在需要时简单地调用它.例如:
Instead, you can create a function that calculates the total and simply call that when you need it. For example:
const calculateTotal = state => {
let total = state.cart.reduce((total, item) => {
return total + item.quantity * item.product.price
}, 0);
// Assuming you just have one coupon, you could maintain a boolean in state
if (state.hasCoupon) {
total -= 50;
}
return total;
}
然后，您需要在代码中的任何地方获取总数，您可以简单地使用此功能.在mapStateToProps中包含这种功能并不罕见:
And then, anywhere in your code you need to get the total, you can simple use this function. It's not uncommon to include this sort of function in mapStateToProps:
const mapStateToProps = state => ({
total: calculateTotal(state);
});
如果最终得到很多派生状态，则使用重新选择器之类的选择器库可能会带来一些好处可以帮助您构建从其他选择器派生的选择器，并实现 memoization 来提高性能.
If you end up with a lot of derived state, you may see some advantages from using a selector library like Reselect which can help you build selectors derived from other selectors and implements memoization for performance boosts.
这篇关于如何在Redux中调度功能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
