为什么 Redux 不调度动作？答案

【问题标题】：Why isn't Redux dispatching action?为什么 Redux 不调度动作？
【发布时间】：2020-08-30 03:23:51
【问题描述】：

在我的 React Native 项目中，Redux 没有将购物车操作分派给减速器，我登录控制台查看是否正在调用减速器，但实际上没有。正在调用该操作，但未将其分派给减速器。 App.js 中的所有内容看起来都正确，并且所有导入都是正确的，就像操作没有传递给减速器一样。

减速机：

 import ADD_TO_CART from '../actions/cart'
    
    
    const initalState = {
        items: {},
        totalAmount: 0
    };
    
    export default (state = initalState, action) => {
        switch (action.type) {
            case ADD_TO_CART:
                const addedProduct = action.product
                const prodPrice = addedProduct.price;
                const prodTitle = addedProduct.title;
    
                console.log('prodPrice')
                let updatedCartItem;
    
                if (state.items[addedProduct.id]) {
                    // already have the item in the cart
                    updatedCartItem = new CartItem(
                        state.items[addedProduct.id].quantity + 1,
                        prodPrice,
                        prodTitle,
                        state.items[addedProduct.id].sum + prodPrice
                    );
                }
                else {
                    updatedCartItem = new CartItem(1, prodPrice, prodTitle, prodPrice)
                }
                return {
                    ...state,
                    items: { ...state.items, [addedProduct.id]: updatedCartItem },
                    totalAmount: state.totalAmount + prodPrice
                }
        }
        return state;
    }

行动：

    export const ADD_TO_CART = 'ADD_TO_CART'
    
    export const addToCart = product => {
        console.log('this is working')
        return { type: ADD_TO_CART, product: product }
    }

正在调用调度的文件：

    import React from 'react'
    import { FlatList, StyleSheet, Button } from 'react-native'
    import { useSelector, useDispatch } from 'react-redux'
    import { HeaderButtons, Item } from 'react-navigation-header-buttons'
    
    import ProductItem from '../../components/shop/ProductItem'
    import * as cartActions from '../../store/actions/cart'
    import HeaderButton from '../../components/UI/HeaderButton'
    
    const ProductsOverviewScreen = props => {
        // products is 
        const products = useSelector(state => state.products.availableProducts);
        const dispatch = useDispatch()
        return (
            <FlatList 
                data={products} 
                keyExtractor={item => item.id}
                renderItem={itemData => (
                    <ProductItem 
                         image={itemData.item.imageUrl} 
                         title={itemData.item.title}
                         price={itemData.item.price}
                         onViewDetail={() => {
                            props.navigation.navigate('ProductDetail', { 
                                productId: itemData.item.id,
                                productTitle: itemData.item.title 
                            })
                        }}
                        onAddToCart={() => {
                            dispatch(cartActions.addToCart(itemData.item))
                        }}
                    /> 
                )}
            />
        )
    }
    
    ProductsOverviewScreen.navigationOptions = navData => {
        return {
            headerTitle: 'All Products',
            headerRight: () => 
            <HeaderButtons HeaderButtonComponent={HeaderButton}>
                <Item 
                    title='Cart' 
                    iconName={'ios-cart'} onPress={() => {
                        navData.navigation.navigate('Cart')
                    }} 
                />
            </HeaderButtons>
        }
    };
    
    const styles = StyleSheet.create({
    
    })
    
    export default ProductsOverviewScreen;

App.js:
   import React from 'react';
import { createStore, combineReducers } from 'redux'
import { Provider } from 'react-redux'

import productReducer from './store/reducers/products'
import ShopNavigator from './navigation/ShopNavigator'
import cartReducer from './store/reducers/cart'

const rootReducer = combineReducers({
  products: productReducer,
  cart: cartReducer
})

const store = createStore(rootReducer)

export default function App() {
  return (
    <Provider store={store}>
      <ShopNavigator />
    </Provider>
  );
}

商店导航器：

import { createStackNavigator } from 'react-navigation-stack'
import { createAppContainer } from 'react-navigation'

import ProductsOverviewScreen from '../screens/shop/ProductsOverviewScreen'
import ProductDetailScreen from '../screens/shop/ProductDetailScreen'
import CartScreen from '../screens/shop/CartScreen'
import colors from '../constants/colors'

const ProductsNavigator = createStackNavigator({
    ProductsOverview: ProductsOverviewScreen,
    ProductDetail: ProductDetailScreen,
    Cart: CartScreen
}, {
    defaultNavigationOptions: {
        headerStyle: {
            backgroundColor: colors.primary
        },
        headerTintColor: 'white',
    }
})

export default createAppContainer(ProductsNavigator)

【问题讨论】：

<ShopNavigator /> 里面是什么？
那是引用 React 本机堆栈导航器，其中没有 redux
请发布您的 ShopNavigator 组件，很可能它没有将您的操作函数addToCart 作为道具（即使它已正确导入），或者它没有传递到connect，因此它不会执行。
我要求确保从提供者到调度操作的组件的流程是正确的
好的，我添加了商店导航器

标签： reactjs react-native redux

【解决方案1】：

我找到了答案，我必须将 ADD_TO_CART 从 '../actions/cart' 导入到 import { ADD_TO_CART } from '../actions/cart 括号显示了我想要的变量的特定导入。如果没有括号，它将找不到该操作正在输出的任何默认函数。

【讨论】：