فیلم15

frontend/src/App.js

 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>

frontend/src/actions/productActions.js

 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 });
+};

frontend/src/constants/productConstants.js

 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";

frontend/src/index.css

@@ -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:

frontend/src/reducers/productReducers.js

 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  
+  }
+};

frontend/src/screens/ProductScreen.js

+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>
+  );
+}