GSAP与NPM在模块化开发中的应用？
{item.name} - ${item.price}
;
};
export default CartItem;
```
```javascript
// src/components/CartList.js
import React from 'react';
import { connect } from 'react-redux';
import CartItem from './CartItem';
const CartList = ({ cartItems }) => {
return (
{cartItems.map(item => (
))}
);
};
const mapStateToProps = state => ({
cartItems: state.cart.items
});
export default connect(mapStateToProps)(CartList);
```
```javascript
// src/actions/cartActions.js
import axios from 'axios';
export const addToCart = item => {
return dispatch => {
axios.post('/api/cart', item).then(response => {
dispatch({ type: 'ADD_TO_CART', payload: response.data });
});
};
};
```
```javascript
// src/reducers/cartReducer.js
import { ADD_TO_CART } from '../actions/cartActions';
const initialState = {
items: []
};
export default function cartReducer(state = initialState, action) {
switch (action.type) {
case ADD_TO_CART:
return {
...state,
items: [...state.items, action.payload]
};
default:
return state;
}
}
```
```javascript
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import cartReducer from './reducers/cartReducer';
import CartList from './components/CartList';
import { addToCart } from './actions/cartActions';
const store = createStore(cartReducer);
ReactDOM.render(
猜你喜欢：云原生APM