I've created a super simple e-commerce application with react, react-redux, react-router, and redux-persist.
Each url or "route" was made with react-router in the react index.js file.
<BrowserRouter>
<Routes>
<Route path="/" element={<App />} />
<Route path="/cart" element={<Cart />} />
<Route path="/products" element={<ProductContainer />} />
<Route path="*" element={<Error />} />
</Routes>
</BrowserRouter>
All of the products in the application were fetched and moved around using the useDispatch and useSelector functions from react-redux.
There were two simple actions made to move items to the cart and to remove them as well.
function rootReducer(state = initialState, action) {
switch (action.type) {
case ADD_TO_CART:
return {
...state,
cart: [...state.cart, action.payload],
};
case REMOVE:
return {
...state,
cart: state.cart.filter((item) => item !== action.payload),
};
default:
return state;
}
}
Redux-persist was necessary to use to prevent the items in the cart from disappearing when the user would switch to another page.
There was definitely more functionality I wanted to add to this little application, but I either ran out of time or couldn't figure out how to work other installed packages.
But if you want to play around with the code or read a little bit more about this application, checkout the github for it here.
Top comments (0)