Commit e59b6c68 authored by Rasoul Madani's avatar Rasoul Madani
Browse files

فیلم15

parent 4314326c
import "./App.css";
import HomeScreen from "./screens/HomeScreen";
import ProductScreen from "./screens/ProductScreen";
import { BrowserRouter, Route } from "react-router-dom";
function App() {
......@@ -17,6 +18,7 @@ function App() {
</header>
<main>
<Route path="/" component={HomeScreen} exact></Route>
<Route path="/product/:id" component={ProductScreen}></Route>
</main>
<footer className="row center">© 2020 All right reserved.</footer>
</div>
......
import {
PRODUCT_LIST_REQUEST,
PRODUCT_LIST_SUCCESS,
PRODUCT_LIST_FAIL
PRODUCT_LIST_FAIL,
PRODUCT_DETAILS_REQUEST,
PRODUCT_DETAILS_SUCCESS,
PRODUCT_DETAILS_FAIL,
} from "../constants/productConstants";
import Axios from "axios";
......@@ -11,15 +14,19 @@ export const listProducts = () => async (dispatch) => {
});
try {
const { data } = await Axios.get("/api/products");
dispatch({
type: PRODUCT_LIST_SUCCESS,
payload: data,
});
} catch (khata) {
dispatch({
type: PRODUCT_LIST_FAIL,
payload:khata.message
})
dispatch({
type: PRODUCT_LIST_FAIL,
payload: khata.message,
});
}
};
export const detailsProduct = (productId) => (dispatch) => {
dispatch({ type: PRODUCT_DETAILS_REQUEST });
};
export const PRODUCT_LIST_REQUEST = "PRODUCT_LIST_REQUEST";
export const PRODUCT_LIST_SUCCESS = "PRODUCT_LIST_SUCCESS";
export const PRODUCT_LIST_FAIL = "PRODUCT_LIST_FAIL";
export const PRODUCT_DETAILS_REQUEST = "PRODUCT_DETAILS_REQUEST";
export const PRODUCT_DETAILS_SUCCESS = "PRODUCT_DETAILS_SUCCESS";
export const PRODUCT_DETAILS_FAIL = "PRODUCT_DETAILS_FAIL";
......@@ -8,6 +8,9 @@ body {
font-size: 1.6rem;
font-family: Helvetica, Arial, sans-serif;
}
#root {
height: 100%;
}
.grid-container {
display: grid;
grid-template-areas:
......
import {
PRODUCT_LIST_REQUEST,
PRODUCT_LIST_SUCCESS,
PRODUCT_LIST_FAIL
PRODUCT_LIST_FAIL,
PRODUCT_DETAILS_REQUEST
} from "../constants/productConstants";
export const productListReducer = (
......@@ -19,3 +20,15 @@ export const productListReducer = (
return state;
}
};
export const productDetailsReducer = (
state = { product: {}, loading: true },
action
) => {
switch(action.type){
case PRODUCT_DETAILS_REQUEST :
return {loading: true}
default :
return state
}
};
import { useDispatch } from "react-redux";
import { useEffect } from "react";
import { detailsProduct } from "../actions/productActions";
export default function ProductScreen(props) {
const productId = props.match.params.id;
const dispatch = useDispatch();
useEffect(() => {
dispatch(detailsProduct(productId));
}, [dispatch, productId]);
return (
<div>
<div>به نام ابر برنامه نویس عالم</div>
<div>{productId}</div>
</div>
);
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment