React-Redux 问题。找不到变量 mapDispatchToProps

Question

我在过去的20天里一直在开发应用程序，大约一周前安装了react redux。一切都很好，直到今天我无法启动我的应用程序。我正在使用expo，当我使用expo启动时，它显示Unable to start your application. Please refer to https://expo.fyi/no-registered-application for more information.

在错误日志中，它显示

unable to find variable mapDispatchToProps为了成功构建JavaScript捆绑包，我必须尝试5到6次。我甚至尝试卸载和重新安装react redux软件包，并重新启动了我的机器，但这个问题仍然存在。

现在我可以在尝试几次后开始，但我担心这会导致生产和构建APK包的问题。

Redux代码

const mapStateToProps = (state) =>{
return {
cartItems :state
}
}
const mapDispatchToProps = (dispatch) =>{
return {
removeItem:(cart) =>dispatch({type:'REMOVE_FROM_CART',payload:cart}),
addItemsToCart:(cart) =>dispatch({type:'ADD_TO_CART',payload:cart}),
removePermanent:(cart) => dispatch({type:'REMOVE_PERMANENTLY',payload:cart})
}
} 
export default connect(mapStateToProps,mapDispatchToProps)(Cart)

如有任何帮助或指导，我们将不胜感激。

Answer 1

Ciao，根据react redux 7.2文档，将参数转发给动作创建者的正确方法是：

const mapDispatchToProps = dispatch => {
return {
// explicitly forwarding arguments
onClick: event => dispatch(trackClick(event)),
// implicitly forwarding arguments
onReceiveImpressions: (...impressions) => dispatch(trackImpressions(impressions))
}
}

所以，在你的情况下，我认为你应该写，例如使用显式转发：

const mapDispatchToProps = (dispatch) =>{
return {
removeItem: cart => dispatch({type:'REMOVE_FROM_CART',payload:cart}),
addItemsToCart: cart => dispatch({type:'ADD_TO_CART',payload:cart}),
removePermanent: cart => dispatch({type:'REMOVE_PERMANENTLY',payload:cart})
}
} 

Answer 2

这是定义操作的地方

const initialState = {
cart: [],
total: 0,
}

const cartItems = (state = initialState, action) => {
switch(action.type) {
case 'ADD_TO_CART':
{
const updatedCart = [...state.cart];
const item = updatedCart.find(x=>x.key===action.payload.key);
if(item)
{
item.count++;
}
else{
updatedCart.push(action.payload);
}
return {
...state,
cart: updatedCart,
total: state.total + 1,

}
}
case 'REMOVE_FROM_CART' :
{  
let updatedCart = [...state.cart];
const item = updatedCart.find(x=>x.key===action.payload.key);
if (item.count === 1 )
{
updatedCart = state.cart.filter(i => i.key !== action.payload.key)
} else if (item) {
item.count--;
}
// AsyncStorage.setItem('cart',{...state, cart: updatedCart, total : state.total - 1 })
return {...state, cart: updatedCart, total : state.total - 1 }
}
case 'REMOVE_PERMANENTLY' :
{
let updatedCart = [...state.cart];
updatedCart = state.cart.filter(i => i.key !== action.payload.key)
// AsyncStorage.setItem('cart',{...state, cart: updatedCart, total : state.total - 1})
return {...state, cart: updatedCart, total : state.total - 1 }
}

}
return state
}
export default cartItems    

除此之外，我只是简单地用按钮onPress函数调用这些动作绑定，比如onPress={()=> this.props.navigation.navigate("CHECKOUT",{cart:this.props.cartItems.cart})}

在另一个屏幕/页面中，我使用了类似的单个调度操作

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

这是关于mapDispatchToProps的全部代码。