关于react redux的问题

Question

当我想实现一个购物车时，我在 homepage.js 上添加了一个 state 的 item。我在 homepage.js 中得到正确的状态。但是，我在 cart.js 中得到的状态是不正确的。可以帮我检查一下我犯了什么错误吗？谢谢！

这里是我的 reducer.js

const shoppingCartReducer = (state=[], action) => {
    
    const {type, payload} = action;
    
    switch(type){
        case ADD_ITEM_TO_CART:
            console.log("state add to cart",state);
            return [...state, payload];
        
        case REMOVE_TIEM_FROM_CART:
            return state.filter(item => item !== payload);
        
        case CLEAR_THE_CART:
            return state = [];
        
        default:
            console.log("state", state);
            return state;
    }
    
    
}

export default shoppingCartReducer;

这是我的 store.js

const reducers = combineReducers({
    shoppingCartReducer: shoppingCartReducer
})

const store = createStore(
    reducers,
    composeWithDevTools(applyMiddleware(thunkMiddleware))
)

export default store; 

这是我的 homepage.js，我通过 'props.addToCart(product1)' 在状态中添加项目，并在此页面中获得正确的状态。

....
<CardDeck className='m-1'>
                <Card border='warning' className='ml-3 mt-2 p-2'>
                    <Card.Link href="/productPage">
                            <Card.Img variant="top" src='../images/camera.jpg' />
                        </Card.Link>
                       <Card.Body>
                        <Card.Title>Camera</Card.Title>
                            <Card.Text>Brand: CANNON</Card.Text>
                            <Card.Text>Price: $600</Card.Text>
                            <Card.Text>Description: CANNON EOS 80D DSLR CAMERA
                            </Card.Text>
                           <Button variant="warning"
                                   onClick={() => props.addToCart(product1)}

                           >Add to cart
                           </Button>
                        </Card.Body>
                </Card>
                <Card border='warning' className='ml-3 mt-2 p-2'>
                    <Card.Link href="/productPage">
                        <Card.Img variant="top" src='../images/mouse.jpg' />
                    </Card.Link>
                    <Card.Body>
                        <Card.Title>Mouse</Card.Title>
                        <Card.Text>Brand: LOGITECH</Card.Text>
                        <Card.Text>Price: $100</Card.Text>
                        <Card.Text>Description:  LOGITECH G-SERIES GAMING MOUSE
                        </Card.Text>
                        <Button variant="warning"
                                onClick={() => props.addToCart(product2)}
....

const mapDispatchtoProps = (dispatch) => {
    return {
        addToCart: (item) => {
            dispatch(addItemToCart({item}));
        }
    }
}

export default connect(null, mapDispatchtoProps)(HomePage);

这是我的购物车.js

const Cart = (props) => {
    ....
    //productsInCart is empty array
    const productsInCart = props.itemsInCart;
    console.log("productsInCart,",productsInCart);
    ....
    )
}

const mapStateToProps = (state) => {
    console.log("state in cart,", state);
    return {itemsInCart: state.shoppingCartReducer};
}

export default connect(mapStateToProps, null)(Cart);

这是我的 app.js

function App() {
    return (
        <Router>
            <Header/>
                <Switch>
                    <Route path='/' exact component={HomePage}/>
                    <Route path='/cart' component={Cart}/>
                </Switch>
                <Footer />
        </Router>
    );
}

export default App;

这是我的 index.js：

ReactDOM.render(
      <Provider store={store}><App /></Provider>,
  document.getElementById('root')
);

Answer 1

您没有将道具传递给<Cart /> 组件。这就是为什么当您在那里寻找某些东西时，它并不存在。

你可以从上面通过 props 传递它：

function CartWithProps({children}) {
  return (
    <Cart itemsInCart={itemsInCart}>
      {children}
    </Cart>
  );
}

<Route path='/cart' component={CartWithProps}/>

或者从组件内部的 store 提供者消费状态

// could be something like this
const Cart = (props) => {
    ....
    const productsInCart = useSelector(getItemsInCart);
    console.log("productsInCart", productsInCart);
    ....
    )
}

或者另一种猜测是你改变了发送到connect函数的参数顺序：

//null first
export default connect(null, mapDispatchtoProps)(HomePage);
//null second
export default connect(mapStateToProps, null)(Cart);