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

【问题标题】：React-Redux issue. can't find variable mapDispatchToPropsReact-Redux 问题。找不到变量 mapDispatchToProps
【发布时间】：2020-07-28 17:59:18
【问题描述】：

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

在错误日志中显示

unable to find variable mapDispatchToProps 我必须尝试 5 到 6 次才能成功构建 JavaScript 包。我什至尝试卸载并重新安装 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)

任何帮助或指导将不胜感激。

【问题讨论】：

请将代码贴在您尝试使用mapDispatchToProps的位置。
我已经编辑了这个问题。请检查

标签： javascript react-native redux

【解决方案1】：

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

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})
   }
 }

【讨论】：

我做了更改，但仍然记录相同的错误。
Ciao，我尝试通过将示例来自 react-redux 7.2 文档来更新我的答案。如果问题仍然存在，则错误可能在其他地方。也许您可以更新您的问题，添加更多组件代码（例如您调用 dispatch 的部分）。
我还想补充一点，我尝试在 Web 模式下启动项目，但它抛出了一个不同的错误，即未定义商店，但我已经定义了商店。这件事快把我逼疯了。不知道是什么问题。尝试 4 或 5 次后，它完美运行，没有问题没有警告没有错误。
只需向您发送请求即可。请检查
解决了兄弟。只需在我的手机上卸载并重新安装 expo 应用程序即可。

【解决方案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 的全部代码。

【讨论】：