关于反应还原的探索

Question

当我想实现一个购物车时，我在homepage.js上添加了一个状态为的项目。我在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;

这是我的商店.js

const reducers = combineReducers({
shoppingCartReducer: shoppingCartReducer
})
const store = createStore(
reducers,
composeWithDevTools(applyMiddleware(thunkMiddleware))
)
export default store; 

这是我的主页.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);

这是我的cart.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 />组件传递道具。这就是为什么当你在那里寻找东西时，它并不存在。

你可以从上面通过道具传递：

function CartWithProps({children}) {
return (
<Cart itemsInCart={itemsInCart}>
{children}
</Cart>
);
}
<Route path='/cart' component={CartWithProps}/>

或从组件内的商店提供商消费状态

// 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);